[ESLint] 遇到了一个奇葩问题，我得学下ESLint

鍓嶈█锛氭垜涓轰粈涔堣涓撻棬鐪嬩笅ESLint锛?/p>

鏈€杩戜娇鐢╒ue鑴氭墜鏋跺垱寤轰簡椤圭洰锛屼娇鐢ㄥ埌浜咵SLint锛屽苟涓斾篃瀹夎浜咵Slint鎻掍欢锛屽湪淇濆瓨鏃惰嚜鍔╨int浠ｇ爜銆備絾鏄彂鐜版瘡娆′繚瀛樼殑鏃跺€欓兘浼氭湁閿欙紝鐒跺悗鏍规嵁鎻愮ず淇敼浜嗕唬鐮侊紝鍐嶆淇濆瓨鏃朵唬鐮佸張鍙樹簡锛屽張鎶ラ敊锛屼簬鏄喅瀹氳姳涓€浜涙椂闂翠簡瑙ｄ笅ESLint銆?/p>

1.浠€涔堟槸ESLint

ESLint瀹樼綉鍦板潃锛歨ttps://zh-hans.eslint.org/

ESLint鏄竴涓牴鎹柟妗堣瘑鍒苟鎶ュ憡ES/JS浠ｇ爜闂鐨勫伐鍏凤紝鍏剁洰鐨勬槸浣夸唬鐮侀鏍兼洿鍔犱竴鑷村苟閬垮厤閿欒锛屽府浣犵紪鍐欐洿鍔犲共鍑€銆佸彲闈犵殑浠ｇ爜銆?/p>

ESLint鍏锋湁楂樺害鍙厤缃€э紝鍏佽浣犲畾涔夎嚜宸辩殑缂栫爜椋庢牸瑙勫垯锛屾垨鑰呴€夋嫨鍚勭棰勯厤缃殑瑙勫垯闆嗭紝姣斿锛欰irbnb\Google\Standard銆備篃鍙互鏍规嵁椤圭洰鐨勫叿浣撻渶姹傝嚜瀹氫箟ESLint锛屽己鍒舵墽琛屼竴鑷寸殑浠ｇ爜椋庢牸銆?/p>

閫氳繃涓婇潰鐨勭畝浠嬶紝澶ф宸茬粡鏄庣櫧浜咵SLint鐨勫ソ澶勩€傚苟涓旂幇鍦ㄧ殑浼佷笟绾ч」鐩紑鍙戜腑锛岄兘浼氫娇鐢‥SLint鏉ヨ鑼冨洟闃熷紑鍙戙€?/p>

2. 瀹夎浣跨敤

2.1 鍦ㄩ」鐩腑瀹夎ESLint

鎵ц浠ヤ笅鍛戒护杩涜瀹夎鍜岄厤缃紝鍦ㄩ€夋嫨涓€浜涢厤缃箣鍚庯紝灏变細鍦ㄩ」鐩腑瀵煎叆ESLint:

npm init @eslint/config

鉁?How would you like to use ESLint路 style
鉁?What type of modules does your project use路 esm
鉁?Which framework does your project use路 vue
鉁?Does your project use TypeScript路 No / Yes
鉁?Where does your code run路 browser
鉁?How would you like to define a style for your project路 guide
鉁?Which style guide do you want to follow路 standard
鉁?What format do you want your config file to be in路 JavaScript
Checking peerDependencies of eslint-config-standard@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0  eslint-plugin-promise@^6.0.0
鉁?Would you like to install them now路 No / Yes
鉁?Which package manager do you want to use路 npm
Installing eslint-plugin-vue@latest, eslint-config-standard@latest, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0 || ^16.0.0 , eslint-plugin-promise@^6.0.0

added 211 packages, and audited 212 packages in 12s

91 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Successfully created .eslintrc.js file in /Users/xxx/Desktop/ESLintStudy

2.2 閰嶇疆

鍦ㄨ繍琛屽畬npm init @eslint/config涔嬪悗锛岄」鐩洰褰曚笅浼氭湁.eslintrc.{js,yml,json} 鏂囦欢锛屾垜鐨勬槸鏈変釜.eslintrc.js鏂囦欢锛?/p>

濡傛灉鎴戜滑鎯宠鑷畾涔変竴浜涜鍒欙紝灏遍渶瑕佷慨鏀硅繖涓枃浠剁殑閰嶇疆浜嗐€?/p>

2.3 鎵цeslint

鎴戜滑鍏堝缓绔嬩竴涓祴璇曠殑js鏂囦欢锛屼唬鐮佹牸寮忓緢闅忔€э細

function test(params) {
    let a=10;
    let b =     10+1
    console.log(b);
}

濡傛灉淇濆瓨鏃惰嚜鍔ㄦ牸寮忓寲浜嗭紝鎴戜滑闇€瑕佸湪璁剧疆涓悳绱㈡牸寮忓寲锛屽皢VSCode涓殑閰嶇疆鍏抽棴锛?/p>

VSCode杩欎釜鐨勮鍒欏彲鑳借窡ESLint鐨勮鍒欎笉涓€鏍凤紝鎵€浠ヤ繚瀛樼殑鏃跺€欏彲鑳戒細鎸夌収VSCode榛樿鐨勪唬鐮佹牸寮忚鍒欒繘琛屼慨鏀癸紝浣嗘槸鍙堜笉婊¤冻ESLint鐨勮鍒欙紝鎵€浠ュ氨閬囧埌浜嗛《閮ㄧ殑閭ｄ釜濂囪懇闂銆?/p>

馃涓嶇煡閬撹繖涓厤缃槸鍚︽纭紝濡傛灉鏈夊ぇ浣簡瑙ｏ紝鍙互鎸囩偣涓€涓嬨€?/p>

鐒跺悗鎴戜滑浣跨敤npx eslint hello.js妫€鏌ヤ唬鐮侊紝4琛屼唬鐮侊紝灞呯劧鏈?4涓敊璇細

$ npx eslint hello.js

  1:10  error  'test' is defined but never used               no-unused-vars
  1:14  error  Missing space before function parentheses      space-before-function-paren
  2:1   error  Expected indentation of 2 spaces but found 4   indent
  2:9   error  'a' is assigned a value but never used         no-unused-vars
  2:9   error  'a' is never reassigned. Use 'const' instead   prefer-const
  2:10  error  Operator '=' must be spaced                    space-infix-ops
  2:13  error  Extra semicolon                                semi
  3:1   error  Expected indentation of 2 spaces but found 4   indent
  3:9   error  'b' is never reassigned. Use 'const' instead   prefer-const
  3:12  error  Multiple spaces found before '10'              no-multi-spaces
  3:19  error  Operator '+' must be spaced                    space-infix-ops
  4:1   error  Expected indentation of 2 spaces but found 4   indent
  4:19  error  Extra semicolon                                semi
  5:2   error  Newline required at end of file but not found  eol-last

鉁?14 problems (14 errors, 0 warnings)
  12 errors and 0 warnings potentially fixable with the `--fix` option.

鏍规嵁杩欎簺閿欒锛屾垜浠氨鍙互鏍规嵁鎻愮ず淇℃伅锛屼慨鏀规垜浠殑浠ｇ爜浜嗐€?/p>

杩欓噷涓轰粈涔堜娇鐢╪px锛?/p>

鍥犱负鎴戜滑骞舵病鏈夊湪鍏ㄥ眬瀹夎ESLint锛屾墍浠ユ槸娌℃湁eslint杩欎釜鍛戒护鐨勶紝闇€瑕佷娇鐢╪px銆俷px鏄痭pm5.2寮曞叆鐨勫伐鍏凤紝鍙互涓存椂瀹夎鍙墽琛屼緷璧栧寘锛屽苟涓旀墽琛屼緷璧栧寘涓殑鍛戒护锛屽畨瑁呭畬鎴愪箣鍚庝細鑷姩杩愯锛岀敤瀹屽悗浼氬垹闄ゃ€?/p>

3.ESLint鎵╁睍瀹夎

鎴戜滑鑲畾涓嶆兂姣忔鏁插畬浠ｇ爜閮芥墜鍔ㄦ墽琛屾鏌ュ懡浠わ紝濡傛灉鎴戜滑寮€鍙戞椂鑳藉鍦ㄦ枃浠朵繚瀛樻椂鑷姩鎸夌収閰嶇疆鐨凟SLint瑙勫垯鏍煎紡鍖栦唬鐮侊紝杩欐牱灏辫兘澶熷ぇ澶х殑鎻愰珮寮€鍙戞晥鐜囦簡锛屾垜浠彲浠ヤ娇鐢╒SCode涓殑ESLint鎻掍欢鏉ュ疄鐜版闇€姹傘€?/p>

鍦╒SCode鐨勬墿灞曢潰鏉夸腑鐩存帴鎼滅储ESLint锛岀劧鍚庡畨瑁呬笅杞介噺鏈€澶氱殑閭ｄ釜鍗冲彲锛?/p>

3.1 寮€鍚嚜鍔ㄤ繚瀛樹慨澶?/h2>

姣忔淇敼瀹屼唬鐮侊紝鍙互鍦ㄤ繚瀛樼殑鏃跺€欏浠ｇ爜杩涜淇锛孧ac涓嬬偣鍑籆ode -> 棣栭€夐」 -> 璁剧疆 鎵撳紑璁剧疆椤甸潰锛?/p>

鐒跺悗閫夋嫨鐢ㄦ埛 -> 鎵╁睍 -> ESLint -> 鎵撳紑setting.json鏂囦欢锛?/p>

娣诲姞浠ヤ笅閰嶇疆锛岃缃閰嶇疆椤逛粎涓篍SLint鎵撳紑锛?/p>

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    }

濡備笅鍥炬墍绀猴細

鍙兘鍦ㄥ叾浠栨枃绔狅紝鍏充簬杩欎釜閰嶇疆鏈変竴浜涗笉鍚岋紝杩欐槸鍥犱负ESLint鎻掍欢鐨勭増鏈笉鍚岋紝鎴戜滑鍙互鍦ㄥ叾鎻掍欢鐨勪粙缁嶆垨鑰単ithub涓湅鍒扮浉鍏崇殑璇存槑锛屼娇鐢ㄦ渶鏂扮殑閰嶇疆鍗冲彲锛歨ttps://github.com/Microsoft/vscode-eslint銆?/p>

4.蹇界暐鎸囧畾鏂囦欢鍜岀洰褰?/h2>

濡傛灉椤圭洰涓湁浜涙枃浠舵垨鑰呯洰褰曚笉甯屾湜璁〦SLint鍘诲仛鏍￠獙锛屽彲浠ュ湪鏍圭洰褰曚笅鍒涘缓.eslintignore鏂囦欢锛屾潵鍛婅瘔ESLint璺宠繃鏍￠獙锛屾瘮濡傚拷鐣ist鏂囦欢涓殑浠ｇ爜锛屽弬鑰冿細https://zh-hans.eslint.org/docs/latest/use/configure/ignore锛?/p>

dist/* 
public/*.js

闄や簡杩欑閽堝鏂囦欢鎴栬€呮枃浠跺す蹇界暐鐨勬柟寮忥紝杩樺彲浠ラ€氳繃鍦ㄤ唬鐮佷腑鍔犲叆娉ㄩ噴鏉ュ憡璇塃SLint鏄惁闇€瑕佹牎楠屼唬鐮侊細

/* eslint-disable */        // 鏂囦欢鏈€椤堕儴,鏁翠釜鏂囦欢閮戒笉鏍￠獙
console.log('Hello Word')

/* eslint-disable */        
console.log('Hello Word')
/* eslint-enable */     // 蹇界暐琚敞閲婂寘璧锋潵鐨勪唬鐮?

  

/* eslint-disable no-console */
console.log('Hello Word')       // 鍏ㄥ眬閽堝鎸囧畾瑙勫垯杩涜绂佺敤



// 鍙拡瀵瑰綋鍓嶈  eslint-disable-next-line 鍚庤窡瑙勫垯

console.log('Hello Word')    // eslint-disable-next-line no-console

// eslint-disable-next-line no-console 
console.log('Hello Word')

5. ESLint鍩虹閰嶇疆

5.1 rules

瑙勫垯鏄?ESLint 鐨勬牳蹇冩瀯寤烘ā鍧椼€傝鍒欓獙璇佷綘鐨勪唬鐮佹槸鍚︾鍚堟煇涓湡鏈涳紝浠ュ強濡傛灉涓嶇鍚堣鏈熸湜璇ユ€庝箞鍋氥€傝鍒欒繕鍙互鍖呭惈閽堝璇ヨ鍒欑殑棰濆閰嶇疆閫夐」銆?/p>

濡傛灉鎯宠鏀瑰彉瑙勫垯鐨勮缃紝闇€瑕佹妸瑙勫垯ID璁剧疆涓轰互涓嬪€硷細

• off 鎴?0锛屽叧闂鍒?/li>
• warn 鎴?1锛屽惎鐢ㄥ苟瑙嗕綔璀﹀憡
• error 鎴?2锛屽惎鐢ㄥ苟瑙嗕綔閿欒

閫氬父浼氬皢瑙勫垯璁剧疆涓篹rror锛屼互渚垮湪闆嗘垚娴嬭瘯銆乸re-commit妫€鏌ュ拰鎷夊彇璇锋眰鍚堝苟涓己鍒堕伒瀹堣鍒欍€?/p>

5.1.1 浣跨敤閰嶇疆娉ㄩ噴

鍦ㄤ笅杈硅繖涓緥瀛愪腑锛屽叧闂璭qeqeq锛屽惎鐢ㄤ簡curly骞惰浣滈敊璇細

/* eslint eqeqeq: "off", curly: "error" */

杩樺彲浠ュ鍔犱竴浜涙敞閲婃弿杩帮紝瑙ｉ噴涓轰粈涔堟敞閲婃槸蹇呰鐨勶細

/* eslint eqeqeq: "off", curly: "error" -- Here's a description about why this configuration is necessary. */

5.1.2 浣跨敤閰嶇疆鏂囦欢

瑕佸湪閰嶇疆鏂囦欢涓厤缃鍒欙紝鍒欎娇鐢╮ules閿拰涓€涓敊璇骇鍒互鍙婁换浣曟兂瑕佷娇鐢ㄧ殑閫夐」锛屾瘮濡傦細

{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    }
}

涓婇潰鍙槸鎸夌収瀹樻柟鏂囨。鎴彇鐨勪竴浜涘熀纭€閰嶇疆锛屾洿瀹屽杽鐨勯厤缃彲浠ョ湅锛?/p>

• 閰嶇疆瑙勫垯锛歨ttps://zh-hans.eslint.org/docs/latest/use/configure/rules
• 鎵€鏈夎鍒欏弬鑰冿細https://zh-hans.eslint.org/docs/latest/rules/

鍏充簬ESLint鐨勫叾瀹冮厤缃紝鍙互鍦ㄦ湁闇€瑕佺殑鏃跺€欐煡鐪嬪畼鏂规枃妗ｈ繘琛岄厤缃紝杩欓噷鍙涔犳渶鍩虹鐨凟SLint鐨勪娇鐢紝涓嶆繁鍏ョ爺绌朵簡锛屾瘯绔熼潰璇曟椂涔熸病浜轰細闂繖涓惂銆傘€傘€?/p>

6. Vue鑴氭墜鏋朵腑浣跨敤

鍦ㄤ娇鐢╒ue-CLI鍒涘缓椤圭洰鏃讹紝鍙互閫夋嫨閰嶇疆ESLint锛屼竴鍏辨湁涓変釜鐩稿叧鐨勯厤缃紝濡備笅

// 浣跨敤Standard锛堟爣鍑嗭級鐨勯厤缃?
Pick a linter / formatter config: Standard
// 鍦ㄤ繚瀛樻枃浠舵椂杩涜Lint
Pick additional lint features: Lint on save
// 浣跨敤鍗曠嫭鐨勬枃浠跺瓨鍌‥SLint鐨勯厤缃?
Where do you prefer placing config for Babel, ESLint, etc.:In dedicated config

绛夐」鐩垱寤哄畬鎴愶紝Vue-CLI浼氳嚜鍔ㄧ殑甯垜浠紩鍏ュ拰閰嶇疆ESLint锛?/p>

鐒跺悗鍙互鏍规嵁鑷繁鐨勫紑鍙戜範鎯垨鑰呭叕鍙哥殑瑙勮寖杩涜閰嶇疆浜嗐€?/p>