ESLint文件規則實踐及配置說明

一、ESLint的介紹

ESLint是JavaScript代碼檢查工具，由於JavaScript語言本身的缺陷以及各種小眾庫的開發者要求更嚴格的代碼規範和風格統一，ESLint出現了。

ESLint具有的幾個特點：

1、ESLint是完全可配置的，可以通過配置文件配置規則，以適應不同的項目環境。

2、ESLint支持插件擴展功能，可以支持非常多的規則。

3、ESLint社區規則庫非常完善，可以滿足大多數編程需求。

二、ESLint的使用

1. 項目中引入ESLint

npm install eslint --save-dev

2. 創建ESLint配置文件

在項目根路徑下創建.eslintrc.js文件，並添加如下代碼：

module.exports = {
    extends: 'eslint:recommended',
    parserOptions: {
        ecmaVersion: 8,
        sourceType: 'module',
        ecmaFeatures: {
            impliedStrict: true
        }
    },
    env: {
        node: true,
        es6: true
    },
    rules: {
        'no-console': 'off',
        'no-unused-vars': ['error', { 'ignoreRestSiblings': true }],
        // 推薦使用單引號
        'quotes': ['error', 'single', { 'allowTemplateLiterals': true }],
        'semi': ['error', 'never'],
    }
}

註：ESLint規則給出的是一個規範文檔，我們可以通過 “extends” 來繼承 ESLint 推薦的規範文檔，從而解決在配置 ESLint 時對每種規則的配置。

3. 命令行檢測

npx eslint [filename or dir]

4. 模塊載入檢測

//引入
import {a} from 'a'; 

//使用
a();

5. NODEJS項目檢測

在腳本中使用 “global” 變數。

/* global require, module */
const { foo } = require('./foo');

module.exports = {
  foo,
};

三、ESLint常見問題

1. 如何關閉ESLint檢測

在當前文件或指定代碼上，添加規則注釋。

/* eslint-disable */
alert('foo');

/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');

2. ESLint報錯怎麼解決

我們可以使用注釋的方式來解決，例如「可以忽略此行嚴重報錯」。

//可以忽略此行嚴重報錯
/* eslint-disable */
alert('foo');

3. ESLint和Prettier的區別

ESLint和Prettier都是用來規範代碼的工具，二者在目的上是有所區別的。

ESLint – 用於靜態代碼檢測，指導開發者遵循一些產品製造的最佳實踐。

Prettier – 更像是代碼格式化器，強調的是代碼編寫的統一風格。

ESLint通過檢測代碼可讀性和一致性，Prettier則強制統一代碼格式。

4. ESLint:null-parsing error問題的解決

修改parserOptions即可改變解析器，觀察下方的代碼：

//這裡默認解析器為acmaVersion 6
module.exports = {
    extends: 'eslint:recommended',
    parserOptions: {
        ecmaVersion: 8,
        sourceType: 'module',
        ecmaFeatures: {
            impliedStrict: true
        },
        //修改為babylon
        parser: 'babylon'
    },
    env: {
        node: true,
        es6: true
    },
    rules: {
        'no-console': 'off',
        'no-unused-vars': ['error', { 'ignoreRestSiblings': true }],
        //推薦使用單引號
        'quotes': ['error', 'single', { 'allowTemplateLiterals': true }],
        'semi': ['error', 'never'],
    }
};

5. ESLint與VIM中縮進問題的解決

在Vim中配置”editor.tabSize”和”editor.insertSpaces”，確保Vim與ESLint一致，具體可以參考如下代碼：

//.eslintrc.js文件
// 確保ESLint在Vim中的縮進為2
{
  "env": {
      "browser": true
      },
  "extends": "eslint:recommended",
  "parserOptions": {
      "ecmaVersion": 8,
      "sourceType": "module",
      "ecmaFeatures": {
          "impliedStrict": true
      }
  },
  "rules": {
      "indent": ["error", 2], // 包含「對象字面量縮進問題」解決方案
      "linebreak-style": ["error", "unix"],
      "semi": ["error", "never"]
  }
}

// .vimrc文件
let g:jsx_indent_disable = 1 // 禁用縮進2空格的設置
set tabstop=2
set shiftwidth=2
set softtabstop=2
set autoindent
set expandtab // 將製表符轉換為空格，以確保與ESLint一致