Czysty projekt VueJS 2 i używanie średników a zgodność ze standardami ESLint

vuejs logo

JavaScript jako bardzo elastyczny język programowania nie wymaga używania średników na końcu instrukcji. Nie wymaga – i nawet zgodnie z zaproponowanym standardem JavaScript, nie zaleca się ich stosowania.

Jednak moim skromnym zdaniem – jako kogoś, kto kiedyś popełnił trochę kodu w C i Perlu – z jakiegoś powodu średniki zostały do składni wprowadzone, a ich stosowanie powoduje (ponownie – to tylko moje osobiste odczucie), że kod staje się też czytelniejszy i ładniejszy.

Utwórzmy zatem czysty projekt z ustawieniami jak poniżej – istotna jest linijka "Pick an ESLint preset Standard", gdyż różne standardy mogą się czepiać nadmiarowych średników lub ich braku.


vue init webpack vuesemicolon
#? Project name vuesemicolon
#? Project description A Vue.js project
#? Author Filip Górczyński <ja@server.com>
#? Vue build standalone
#? Install vue-router? Yes
#? Use ESLint to lint your code? Yes
#? Pick an ESLint preset Standard
#? Set up unit tests No
#? Setup e2e tests with Nightwatch? No
#? Should we run `npm install` for you after the project has been created? (recommended) yarn
#
# vue-cli · Generated "vuesemicolon".
cd vuesemicolon
npm run dev

VueJS – podczas inicjowania czystego projektu pozwala wybrać standard ESLint, w ramach którego sprawdzana będzie zgodność kodu z tym standardem, m. in. po uruchomieniu serwera deweloperskiego. Przy wyborze standardowego sprawdzania składni, dodanie średników na końcach instrukcji będzie skutkowało następującym  błędem:


WARNING Compiled with 1 warnings 19:56:38
http://eslint.org/docs/rules/semi Extra semicolon
src/components/HelloWorld.vue:92:6

Szczegóły błędu dostępne są pod adresem wskazanym w ramach ostrzeżenia: Extra semicolon.

Rozwiązaniem jest dodanie 'semi': [2, 'always'] do pliku .eslintrc.js:


module.exports = {
// …
rules: {
// …
'semi': [2, 'always']
}
};

view raw

.eslintrc.js

hosted with ❤ by GitHub

Ponowne uruchomienie aplikacji będzie wymagało poprawienia (dodania) średników we wszystkich wskazanych miejscach, jednak nadal twierdzę, że nadmiarowy średnik jest lepszy niż jego pominięcie – gdyż próby zastępowania elementów składni wartościami domyślnymi mogą skutkować kodem podobnym do tego z Perla:


#!/usr/bin/env perl
use warnings;
use strict;
$_ = "Hello World\n";
# "Domyśl się" co będzie wyświetlone na ekranie
print;

Całość dostępna w repozytorium.

Dodatkowe źródła i (głównie) kontrargumenty:

  1. JavaScript Style: Semicolons, or No?
  2. StandardJS#Semicolons
  3. JavaScript Semicolon Insertion. Everything you need to know
  4. An Open Letter to JavaScript Leaders Regarding Semicolons
  5. Understanding Automatic Semicolon Insertion in JavaScript

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj /  Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj /  Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj /  Zmień )

Połączenie z %s

Ta witryna wykorzystuje usługę Akismet aby zredukować ilość spamu. Dowiedz się w jaki sposób dane w twoich komentarzach są przetwarzane.