ESLint

為什么要使用 ESLint

• ESLint 可以統(tǒng)一 js 的開發(fā)規(guī)范與風(fēng)格，一個(gè)團(tuán)隊(duì)內(nèi)部的每個(gè)人的代碼風(fēng)格都不一樣，比如有的人還在用 es5，有的人用 es6+，當(dāng)查閱或修改別人代碼的時(shí)候會(huì)很難下手，效率不高，最后造成項(xiàng)目難維護(hù)，ESLint 則會(huì)解決這個(gè)痛點(diǎn)
• js 是松散類型的語言，沒有編譯的過程。只有運(yùn)行時(shí)才能找到問題，開發(fā)時(shí)很容易出錯(cuò)，ESLint 可以在開發(fā)時(shí)就找出錯(cuò)誤與不符合規(guī)范的代碼
• ESLint 有自己的一套規(guī)范，當(dāng)然，我們也可以自定義規(guī)則
• 有很多組件都對 ESLint 支持，如 webpack，babel，還有一些 IDE，如 webstorm，vscode

安裝 ESLint 和相關(guān)插件

為了方便配置，我們選擇使用 airbnb 插件（airbnb號稱最嚴(yán)格的規(guī)范，且包括ES6+的代碼規(guī)范要求，可以滿足我們大部分的開發(fā)需求），安裝它需要先執(zhí)行下面的命令查看其依賴

$ npm info "eslint-config-airbnb-base@latest" peerDependencies

執(zhí)行命令得到結(jié)果 { eslint: '^4.19.1 || ^5.3.0', 'eslint-plugin-import': '^2.14.0' }，我們可以看到它依賴 eslint: '^4.19.1 || ^5.3.0' 和 eslint-plugin-import: '^2.14.0' 則在項(xiàng)目目錄下執(zhí)行命令

$ npm install --save-dev eslint-config-airbnb-base eslint@5.3.0 eslint-plugin-import@2.14.0

如果是 React 項(xiàng)目，請把上面命令中的 eslint-config-airbnb-base 替換成 eslint-config-airbnb 并安裝相關(guān)依賴

配置 eslintrc.js 文件

.eslintrc.js 是配置文件，通過它我們可以控制 Eslint 的執(zhí)行過程及結(jié)果，下面是作者在開發(fā)時(shí)配置的 eslintrc.js 代碼

module.exports = {
  extends: 'airbnb-base', // eslint-config-airbnb-base
  // 規(guī)則 在這里您可以配置規(guī)則，讓哪些規(guī)則進(jìn)行校驗(yàn)，哪些不進(jìn)行校驗(yàn)，哪些顯示錯(cuò)誤級別，哪些顯示警告級別等等
  rules: {
    // error
    'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
    quotes: ['error', 'single', { allowTemplateLiterals: true }],
    // warn
    'import/first': 'warn', // import 放在文件頭
    'spaced-comment': 'warn', // 注釋要含有空格
    camelcase: 'warn', // 駝峰命名
    'max-len': ['warn', { code: 150 }],
    'operator-assignment': 'warn',
    'prefer-destructuring': 'warn',
    'prefer-template': 'warn',
    'eol-last': 'warn',
    'object-curly-spacing': 'warn',
    'no-return-assign': 'warn',
    // off
    'no-underscore-dangle': 'off',
    'object-curly-newline': 'off',
    'comma-dangle': 'off',
    'linebreak-style': 'off',
    'no-restricted-syntax': 'off',
    radix: 'off',
    'consistent-return': 'off',
    'no-plusplus': 'off',
    'import/prefer-default-export': 'off',
    'arrow-parens': 'off'
  }
};

以上代碼僅供參考，如要在實(shí)際生產(chǎn)中使用 ESLint，請根據(jù)項(xiàng)目需要自行配置

IDE 配置

作者在開發(fā)的時(shí)候使用 vscode 作為 IDE，所以只要安裝 ESLint 插件即可

vscode ESLint 插件

以上就是 ESLint 個(gè)人認(rèn)為比較完美的配置，本篇文章不是 ESLint 教學(xué)，只是讓您不需要花任何學(xué)習(xí)的時(shí)間，即可方便快捷的實(shí)現(xiàn) ESLint 功能

簡書作者 小菜荔枝 轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)