在VScode中安裝eslint插件
image.png
這個插件是VScode編輯的功能，如果你的項目中有.eslintrc.json文件蹋肮，它會自動讀取文件的規(guī)則吭净，自動檢測代碼
通過npm安裝eslint包
npm install eslint --save-dev
如果只安裝了這個npm包访圃，編輯器是不能直接檢測代碼的替蔬，它是運行在工作臺告私，需要用命令手動去檢測,npx run eslint --init,會自動生成一個.eslintrc.json文件。
image.png
您想如何使用ESLint承桥？
.只檢查語法
.檢查語法并找出問題
.檢查語法驻粟、發(fā)現(xiàn)問題并強制執(zhí)行代碼樣式
這里我選第二項
image.png
您想如何使用ESLint問題？
.JavaScript模塊（導(dǎo)入/導(dǎo)出）
.CommonJS（需要/導(dǎo)出）
.這些都不是
這里我選擇是第一項
image.png
您的項目使用哪種框架凶异？
這里選擇是都不是
image.png
你的項目使用TypeScript嗎蜀撑？? 否/是
我的項目是angular，用的都是ts剩彬，所以我這里選擇yes
image.png
你的代碼在哪里運行(按<space>選擇酷麦，<a>切換全部，<i>反轉(zhuǎn)選擇）
這里選擇是默認就好
image.png
您希望配置文件的格式是什么襟衰？
這里選擇json
image.png
.你想現(xiàn)在用npm安裝它們嗎?
我用的是npm,所以我選擇是
image.png
這是所有的配置選項贴铜，此時執(zhí)行完成后，所在的項目中會生成一個.eslintrc.json文件,所有的配置規(guī)則都寫在這個文件里面瀑晒。
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的選項
"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": {
}
}
這個配置是自動生成的徘意，想要按照自己的想法來苔悦，可以去查eslint配置規(guī)則，有一個rules選項椎咧，規(guī)則都應(yīng)該寫在這里
我先配置一個玖详，我先列舉一個看自動檢測能不能生效把介，設(shè)置了一個不允許console
"overrides":[//要配置具體文件規(guī)則overrides
{
"files": ["*.ts"],
"extends": [
],
"rules": { //配置具體檢測規(guī)則
"no-console":2
}
}
]
image.png
此時的規(guī)則已經(jīng)生效了，說明此流程能走通
