vue 使用eslint開發專案

2021-09-27 08:30:49 字數 1870 閱讀 2394

1、安裝

npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -d
2、建立.eslintrc，這樣就可以檢測**了

3、但是這樣無法檢測vue檔案

npm i eslint-plugin-html -d
這樣就可以檢測script標籤了，因為.vue中也是寫在script標籤中，這時就可以檢測到了

修改.eslintrc檔案

4、使用eslint

在package.json中加入命令，其中–ext表示要檢測檔案的字尾，第二個引數是要檢測的資料夾

"lint":"eslint --ext .js --ext .vue --ext .jsx src/"
執行

npm run lint
5、自動修復eslint的報錯

在package.json中加入命令，其中–ext表示要檢測檔案的字尾，第二個引數是要檢測的資料夾

"lint-fix":"eslint --fix --ext .js --ext .vue --ext .jsx src/"
執行

npm run lint-fix
6、每次執行都檢測**

npm i  eslint-loader babel-eslint -d
再次擴充套件.eslintrc檔案

因為專案是基於webpack進行開發，**是經過了bable處理過的，所以一般使用webpack和bable開發的專案都會指定parser

修改webpack的配置

rules:[


// 在最上面加上


]
enforce:'pre』是要預處理的意思，因為如果eslint都不通過，就不需要往下執行了，所以它應該要在vue-loader處理.vue檔案前執行

7、規範編輯器配置

建立.editorconfig

root = true


[*]charset = utf-8


end_of_line = lf


indent_size = 2


indent_style = space


insert_final_newline = true


trim_trailing_whitespace = true
root 為true，是告訴ide，配置檔案讀到這裡就可以了，不用再往上搜尋

indent_style = space 使用空格而不用製表符

trim_trailing_whitespace 去除每行後面的空格

8、配置鉤子，在提交**前對**進行檢測，如果**沒有通過eslint的檢測，就無法進行提交

注意在安裝這個包前，需要先初始化git

git init
npm i husky -d
安裝這個包後，會自動在.git目錄下生成一些檔案，這些檔案可以讀取我們package.json裡的內容，比如precommit

接著配置package.json的命令

「precommit」:"npm run lint-fix",

vue專案Eslint工具的使用

1 安裝 eslint 7.5.0 eslint config standard 14.1.1 eslint friendly formatter 4.0.1 eslint loader 4.0.2 eslint plugin import 2.22.0 eslint plugin node 11....

vue專案 安裝eslint校驗

eslint 風格校驗 step 1 安裝npm i eslint eslint config standard eslint plugin standard eslint plugin promise eslint plugin import eslint plugin node d.eslint...

vue 關掉vue專案中的ESlint

在新建專案的時候，還信心滿滿的要標準開發，於是開啟了eslint 檢測，後來才發現，想法的太天真，空格縮排不對都要報錯，而且我對錯誤是0容忍。並且一般都是用外掛程式對 進行格式化，但還是很多錯誤，實在不想一遍遍去排查，於是找了找資料，關掉專案中eslint 但是eslint也有可取之處。它可輔助規範...