JavaScript
Linters - Zapewnienie jakości kodu

Uwagi

JSHint

JSHint to narzędzie typu open source, które wykrywa błędy i potencjalne problemy w kodzie JavaScript.

Aby pobrudzić JavaScript, masz dwie opcje.

1. Wejdź na JSHint.com i wklej tam swój internetowy edytor tekstowy.
2. Zainstaluj JSHint w swoim IDE .
   • Atom: linter-jshint (musi mieć zainstalowaną wtyczkę Linter )
   • Podniosły tekst: JSHint Gutter i / lub Sublime Linter
   • Vim: jshint.vim lub jshint2.vim
   • Visual Studio: VSCode JSHint

Zaletą dodania go do IDE jest to, że można utworzyć plik konfiguracyjny JSON o nazwie .jshintrc który będzie używany podczas czyszczenia programu. Jest to zwyczajne, jeśli chcesz współdzielić konfiguracje między projektami.

Przykładowy plik .jshintrc

{
    "-W097": false, // Allow "use strict" at document level
    "browser": true, // defines globals exposed by modern browsers http://jshint.com/docs/options/#browser
    "curly": true, // requires you to always put curly braces around blocks in loops and conditionals http://jshint.com/docs/options/#curly
    "devel": true, // defines globals that are usually used for logging poor-man's debugging: console, alert, etc. http://jshint.com/docs/options/#devel
    // List global variables (false means read only)
    "globals": {
        "globalVar": true
    },
    "jquery": true, // This option defines globals exposed by the jQuery JavaScript library.
    "newcap": false,
    // List any global functions or const vars
    "predef": [
        "GlobalFunction",
        "GlobalFunction2"
    ],
    "undef": true, // warn about undefined vars
    "unused": true // warn about unused vars
}

JSHint pozwala także na konfigurację określonych linii / bloków kodu

switch(operation)
{
   case '+'
   {
      result = a + b;
      break;
   }

   // JSHint W086 Expected a 'break' statement
   // JSHint flag to allow cases to not need a break
   /* falls through */
   case '*':
   case 'x':
   {
      result = a * b;
      break;
   }
}

// JSHint disable error for variable not defined, because it is defined in another file
/* jshint -W117 */
globalVariable = 'in-another-file.js';
/* jshint +W117 */

Więcej opcji konfiguracji udokumentowano na stronie http://jshint.com/docs/options/

ESLint / JSCS

ESLint to liniowy i formatujący styl kodu dla twojego przewodnika po stylach podobny do JSHint . ESLint połączył się z JSCS w kwietniu 2016 roku. ESLint wymaga większego wysiłku, aby skonfigurować niż JSHint, ale na ich stronie internetowej znajdują się jasne instrukcje dotyczące rozpoczęcia pracy.

Przykładowa konfiguracja ESLint jest następująca:

{
    "rules": {
        "semi": ["error", "always"], // throw an error when semicolons are detected 
        "quotes": ["error", "double"] // throw an error when double quotes are detected
    }
}

Przykładowy plik konfiguracyjny, w którym WSZYSTKIE reguły są wyłączone, wraz z opisami tego, co robią, można znaleźć tutaj .

JSLint

JSLint to pień, z którego rozgałęziono JSHint. JSLint zajmuje znacznie bardziej przemyślane stanowisko w kwestii pisania kodu JavaScript, popychając cię do korzystania wyłącznie z części, które Douglas Crockford uważa za „dobre części”, i z dala od kodu, który według Crockforda jest lepszym rozwiązaniem. Poniższy wątek StackOverflow może pomóc Ci zdecydować, który wkładka jest odpowiedni dla Ciebie . Chociaż istnieją różnice (oto kilka krótkich porównań między nim a JSHint / ESLint ), każdą opcję można wyjątkowo dostosować.

Aby uzyskać więcej informacji na temat konfigurowania JSLint, sprawdź NPM lub github .