在VScode中安裝eslint插件

image.png

這個(gè)插件是VScode編輯的功能，如果你的項(xiàng)目中有.eslintrc.json文件，它會(huì)自動(dòng)讀取文件的規(guī)則，自動(dòng)檢測代碼

通過npm安裝eslint包

npm install eslint --save-dev

如果只安裝了這個(gè)npm包，編輯器是不能直接檢測代碼的，它是運(yùn)行在工作臺(tái)，需要用命令手動(dòng)去檢測,npx run eslint --init,會(huì)自動(dòng)生成一個(gè).eslintrc.json文件。

image.png

您想如何使用ESLint？
.只檢查語法
.檢查語法并找出問題
.檢查語法、發(fā)現(xiàn)問題并強(qiáng)制執(zhí)行代碼樣式
這里我選第二項(xiàng)

image.png

您想如何使用ESLint問題？
.JavaScript模塊（導(dǎo)入/導(dǎo)出）
.CommonJS（需要/導(dǎo)出）
.這些都不是
這里我選擇是第一項(xiàng)

image.png

image.png

你的項(xiàng)目使用TypeScript嗎？? 否/是
我的項(xiàng)目是angular，用的都是ts，所以我這里選擇yes

image.png

你的代碼在哪里運(yùn)行(按<space>選擇，<a>切換全部，<i>反轉(zhuǎn)選擇）
這里選擇是默認(rèn)就好

image.png

image.png

.你想現(xiàn)在用npm安裝它們嗎?
我用的是npm,所以我選擇是

image.png

image.png

安裝好了VsCode的插件后，配置setting

  "eslint.autoFixOnSave": true,
    "eslint.alwaysShowStatus": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "typescript",  //檢測ts的選項(xiàng)
            "autoFix": true
        },
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

配置.eslintrc.json的檢測規(guī)則

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}

這個(gè)配置是自動(dòng)生成的，想要按照自己的想法來，可以去查eslint配置規(guī)則，有一個(gè)rules選項(xiàng)，規(guī)則都應(yīng)該寫在這里
我先配置一個(gè)，我先列舉一個(gè)看自動(dòng)檢測能不能生效，設(shè)置了一個(gè)不允許console

   "overrides":[//要配置具體文件規(guī)則overrides
        {
            "files": ["*.ts"],
            "extends": [
            ],
            "rules": {   //配置具體檢測規(guī)則
                "no-console":2
            }
        }
    ]

image.png

此時(shí)的規(guī)則已經(jīng)生效了，說明此流程能走通