eslint配置介紹-如何在uniapp中配置eslint

eslint uniapp-eslint及vue-eslint配置

ESLint 是一個開源的 JavaScript 代碼檢查工具。可以讓程序員在編碼的過程中發現問題而不是在執行的過程中。

1. eslint的特性

請直接參考文檔

附：其他文件的格式設置

一般eslint只作用在項目相關的文件內，而像package.json這類文件我們可以使用VScode中的EditorConfig for VS Code插件來配置

1// 為了與eslint統一性，一般會這樣配置
2[*.{js,vue,json,html,css,less}]
3indent_style = tab
4indent_size = 4
5trim_trailing_whitespace = true
6insert_final_newline = true

2. 開始使用

• 安裝eslint

1$ npm install eslint --save-dev

• 安裝好后需初始化並設置配置文件

1// 在package.json中添加
2"scripts": {
3    "eslint": "eslint --init"
4}
5
6// 在項目下執行，並選擇設置，如下圖
7$ npm run eslint

這樣我們就在項目中添加了.eslintrc.js

 1module.exports = {
 2    'env': {
 3        'browser': true,
 4        'es6': true,
 5        'node': true
 6    },
 7    'extends': 'eslint:recommended',
 8    'globals': {
 9        'Atomics': 'readonly',
10        'SharedArrayBuffer': 'readonly'
11    },
12    'parserOptions': {
13        'ecmaVersion': 2018,
14        'sourceType': 'module'
15    },
16    'rules': {
17        'indent': [
18            'error',
19            'tab'
20        ],
21        'linebreak-style': [
22            'error',
23            'windows'
24        ],
25        'quotes': [
26            'error',
27            'single'
28        ],
29        'semi': [
30            'error',
31            'always'
32        ]
33    }
34};

具體的配置請參照文檔

• 最后我們就可以使用了

1// 在package.json中添加
2"scripts": {
3    "lint": "eslint [項目文件路徑]"
4}
5
6// 執行eslint
7$ npm run lint

另外：我們都知道eslint是js的檢查工具，但是我們的項目中可能有.html,.vue,.ts等等其他內容需要檢查，這時候我們就需要安裝配置一些插件來完成

• ESLint 支持使用第三方插件。在使用插件之前，你必須使用 npm 安裝它。

例：eslint-plugin-vue:

 1// 安裝
 2$ npm i eslint-plugin-vue -D
 3
 4// 配置
 5"extends": [
 6    "eslint:recommended",
 7    "plugin:vue/recommended"
 8],
 9// 每個配置繼承它前面的配置
10plugins: [
11    'vue'
12]
13// plugins 屬性值 可以省略包名的前綴 eslint-plugin-。

3. @vue/cli中的eslint

@vue/cli安裝項目是自動安裝了eslint相關的一系列插件，其中@vue/cli-plugin-eslint提供了不同模式的選擇：

1? Pick an ESLint config:
2> Error prevention only
3  Airbnb
4  Standard
5  Prettier

區別如下圖：

一般可以選擇Error prevention only，那么eslint直接使用eslint:recommended，即eslint中一系列核心規則，可查文檔

• 同時我們查看package.json中的字段：

1"devDependencies": {
2    "@vue/cli-plugin-eslint": "^4.1.0",
3    "babel-eslint": "^10.0.3",
4    "eslint": "^5.16.0",
5    "eslint-plugin-vue": "^5.0.0",
6}

@vue/cli-plugin-eslint是一款vue-cli的eslint插件，就是它為我們初始化了一些配置：

 1base: {
 2    eslint: '^6.7.2',
 3    'eslint-plugin-vue': '^6.1.2'
 4},
 5airbnb: {
 6    '@vue/eslint-config-airbnb': '^5.0.2',
 7    'eslint-plugin-import': '^2.20.1'
 8},
 9prettier: {
10    '@vue/eslint-config-prettier': '^6.0.0',
11    'eslint-plugin-prettier': '^3.1.1',
12    prettier: '^1.19.1'
13},
14standard: {
15    '@vue/eslint-config-standard': '^5.1.0',
16    'eslint-plugin-import': '^2.20.1',
17    'eslint-plugin-node': '^11.0.0',
18    'eslint-plugin-promise': '^4.2.1',
19    'eslint-plugin-standard': '^4.0.0'
20}

可以看到不同的模式提供不同的插件，而其中base是默認一定會安裝的項目

• base提供的默認配置如下：

 1{
 2    parser: require.resolve('vue-eslint-parser'),
 3    parserOptions: {
 4        ecmaVersion: 2018,
 5        sourceType: 'module',
 6        ecmaFeatures: {
 7            jsx: true
 8        }
 9    },
10    env: {
11        browser: true,
12        es6: true
13    },
14    plugins: [
15        'vue'
16    ],
17    rules: {
18        'vue/comment-directive': 'error',
19        'vue/jsx-uses-vars': 'error'
20    }
21}

我們知道每個配置繼承它前面的配置，所以@vue/cli項目中這些配置可以略去不寫。

• 關於babel-eslint的配置，正常我們會寫

1{
2    parser: "babel-eslint",
3    parserOptions: {
4        //...
5    }
6}

但是eslint-plugin-vue中的很多規則都需要vue-eslint-parser檢查<template>, vue-eslint-parser和babel-parser二者有沖突。所以我們使用已下寫法

1parserOptions: {
2    parser: 'babel-eslint',
3    //...
4},

如果我們選擇Standard模式

• 查看package.json中的字段：

1"devDependencies": {
2    "@vue/cli-plugin-eslint": "^4.1.0",
3    "@vue/eslint-config-standard": "^4.0.0",
4    "babel-eslint": "^10.0.3",
5    "eslint": "^5.16.0",
6    "eslint-plugin-vue": "^5.0.0",
7}

根據上述的模式配置會額外安裝響應的插件@vue/eslint-config-standard，這時配置是這樣的：

1'extends': [
2    'plugin:vue/essential',
3    '@vue/standard'
4]

@vue/eslint-config-standard插件的配置替代了eslint的核心規則，其規則配置在./node_modules/eslint-config-standard/eslintrc.json中查看

注：當你選擇其他模式的時候，即選擇了模式中配置好的規則，這時一般不贊成再去修改規則，否則就用默認模式好了

4. prettier

prettier是eslint的一款插件，格式化代碼工具。

• 使用prettier卻不能隨意的配置我們自己想要的風格。大多數人會覺得Prettier 風格非常差，但是如果開發團隊人數眾多時，prettier不但節省了手動去調整代碼風格的時間，而且減少了成員之間無畏的爭執。

• 如果在@vue/cli項目中，之間選擇prettier模式就行了

• 如果需要自己安裝prettier，過程如下：

安裝

1npm i prettier eslint-config-prettier eslint-plugin-prettier --D

配置

 1{
 2    "extends": [
 3        ...,
 4        "prettier",
 5        "plugin:prettier/recommended"
 6    ],
 7    "plugins": ["prettier"],
 8    "rules": {
 9        "prettier/prettier": "error"
10    }
11}

少數配置可以自行設置.prettierrc.js文件

5. uniapp中配置eslint

你當然可以重頭開始安裝eslint，然后初始化，最后安裝你所需要的插件，比如eslint-plugin-vue,但是uniapp小程序項目的構建也使用了@vue/cli工具，所以我們可以直接拿來用

安裝

1$ vue add @vue/eslint
2
3// 同樣的可以選擇@vue/cli-plugin-eslint提供的四個模式
4
5? Pick an ESLint config: Basic
6? Pick additional lint features: Lint on save

在配置上，大部分是通用的，但是我們應該為小程序配置全局變量

1"globals": {
2    "swan": "readonly",
3    "wx": "readonly",
4    "uni": "readonly"
5}

執行結果如下：

---

長按二維碼關注公眾號