vue基礎ESLint Prettier配置教程詳解
引言
VsCode + Vue + ESLint + Prettier 實現 代碼格式規范 + 保存自動修復代碼(js+vue)
先上圖看效果
前言
刪繁就簡，字斟句酌，隻寫通俗易懂的文章；
我曾在很長一段時間裡，都沒有搞清楚 ESLint 的正確配置方法。網上的文章質量也是一言難盡，造成瞭許多的誤導。現在，我理清楚瞭 ESLint 的配置邏輯。撰寫此文，以作日後查漏補缺之用，也希望能對同樣迷惑的你帶來幫助；
親測，歷經多次測試。不管是在創建新項目，還是改造舊項目時，跟著教程進行配置都是 ok 的；
系統環境:
node.js 版本是：v12.14.0 npm 版本是：6.13.4 vue-cli 版本是：vue/cli 4.5.11
安裝 VsCode 插件
首先安裝兩個 VsCode 插件
ESLint
Prettier – Code formatter
配置 VsCode "Workspace.json"
路徑：組合鍵 ctrl+shift+p -> 首選項：打開用戶設置 -> 切換到工作區標簽 -> 鼠標點擊右上角打開設置(json)
如果編輯器是英文狀態下就是
路徑：組合鍵 ctrl+shift+p -> Preferences: Open User Settings -> 切換到Workspace標簽 -> 鼠標點擊右上角Open Settings(json)
復制粘貼下面的 json 代碼並保存即可
Workspace(工作區).json
{
// 將prettier設置為默認格式化程序(在編輯器中有可能被其他Formatter占用，所以將prettier設置為默認Formatter)
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 保存時自動格式化 (根據根目錄下‘.prettierrc文件配置項')
"editor.formatOnSave": true,
// Enable per-language
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
// 為ESLint啟用“保存時自動修復”，並且仍然具有格式和快速修復功能
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true
}
}
配置 vue 的 "package.json"
完整的配置項一共需要下面 6 個 ESLint 相關的插件
{
...
"devDependencies": {
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2"
}
...
}
如果缺少對應的插件就在 devDependencies 對象內加上（多餘的 ESLint 插件可以刪掉）
不要忘記重新 npm install 哦
配置 vue 的 ".eslintrc.js"
- 在 vue2.x 版本中，".eslintrc.js" 文件代碼為
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/essential",
"plugin:vue/recommended",
"eslint:recommended",
"@vue/prettier",
],
parserOptions: {
parser: "babel-eslint",
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
},
};
在 vue3.x 版本中，".eslintrc.js" 文件隻有一點不同，其它代碼都一致。不同處為
module.exports = {
...
extends: [
"plugin:vue/vue3-essential",
"plugin:vue/vue3-recommended",
],
...
};
當然，你的舊項目也有可能把 Eslint 配置寫在瞭其它文件裡面，註意檢查沖突
如果同一目錄下有多個配置文件，ESLint 隻會使用一個。優先順序如下：
.eslintrc.js
.eslintrc.cjs
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
package.json
配置 vue 的 ".prettierrc"
在 vue3.x 中還需要配置 .prettierrc文件。在項目根目錄添加，跟.eslintrc.js 文件同級
為什麼 2.x 版本不需要配置，而 3.x 需要呢？因為 3.x 版本中，ESLint 和 Prettier 會有末尾逗號的沖突。ESLint 默認規則是結尾不加逗號，Prettier 規則結尾要加逗號。代碼保存的時候互相打架，誰也不服誰。所以就新增.prettierrc文件，配置結尾不加逗號；
{
"trailingComma": "none"
}
當然，你若是想要在 vue2.x 版本中配置.prettierrc，我也攔不住你，純看個人喜好
註意，你的舊項目也有可能把 Prettier 配置寫在瞭其它文件裡面，註意檢查沖突
配置 "eslint –fix" 一鍵修復
package.json文件，改造 lint 為如下代碼
package.json
"scripts": {
"lint": "eslint --fix --ext .js,.vue src/",
},
需要進行一鍵修復的時候就執行命令
npm run lint
ESLint 就會自動一件修復項目中所有不符合規則的頁面， 對於不能自動修復的頁面，將在控制臺打印出報錯頁面位置和修復意見，需要自己手動更改
項目龐大、頁面多的的時候，運行 Npm run lint，執行一鍵修復的時間比較久，耐心等待
備註：src/ 是將要要進行校驗的代碼目錄，若想要添加多個目錄，用空格隔開
配置 ESlint 提交時檢測
"package.json" 文件中添加代碼
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,vue}": [
"vue-cli-service lint",
"git add"
]
}
測試配置效果
上面的流程都配置完畢之後，記得重啟編輯器
把下面這段測試代碼復制到項目中，然後 ctrl+s 保存，檢測配置是否成功
<template>
<div class="testPage">
<div
v-for="(item, index) in 10"
:key="index"
class="test"
ref="test"
@click="test"
>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
watch: {},
mounted() {},
destroyed() {},
methods: {
methods: {
test() {
({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,})=> {
if(!greeting){return null};
// TODO: Don't use random in render
let num = Math.floor (Math.random() * 1E+7).toString().replace(/\.\d+/ig, "")
return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>
<strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
{greeting.endsWith(",") ? " " : <span style={{color: 'grey'}}>", "</span> }
<em>
{ greeted }
</em>
{ (silent)
? "."
: "!"}
</div>;
}
},
},
},
name: "testPage",
};
</script>
問題排查
如果還是配置不成功，檢查下面幾處文件
User(用戶).json
路徑：組合鍵 ctrl+shift+p -> 首選項：打開用戶設置 -> 切換到用戶標簽 -> 鼠標點擊右上角打開設置(json)
看看有沒有 ESLint 和 Prettier 等配置代碼，有的話就刪除。下面是我的配置（僅供參考）
{
// 修改多行編輯快捷鍵
"editor.multiCursorModifier": "ctrlCmd",
// 以像素為單位控制字號
"editor.fontSize": 16,
// 設置縮進為兩個空格
"editor.tabSize": 2,
"explorer.confirmDelete": false,
"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
// 關閉警告（Vetur在 /xxxx/xxxxxx 中找不到tsconfig.json,jsconfig.json）
"vetur.ignoreProjectWarning": true,
"security.workspace.trust.untrustedFiles": "open",
"terminal.integrated.profiles.windows": {
"PowerShell": {
"source": "PowerShell",
"icon": "terminal-powershell"
},
"Command Prompt": {
"path": [
"${env:windir}\\Sysnative\\cmd.exe",
"${env:windir}\\System32\\cmd.exe"
],
"args": [],
"icon": "terminal-cmd"
},
"Git Bash": {
"source": "Git Bash"
},
"Windows PowerShell": {
"path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
}
},
"terminal.integrated.defaultProfile.windows": "Windows PowerShell"
}
.prettierrc
檢查項目根目錄是否有 .prettierrc 文件，也許會跟 ESLint 規則沖突，如果出現沖突，自行搜索文檔解決
{
"endOfLine": "auto"
}
.eslintrc.js
.eslintrc.js 文件同理
package.json
曾經碰到過這樣的一個報錯
npm ERR! code EJSONPARSE
npm ERR! file D:\我自己的項目名\package.json
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected token } in JSON at position 218 while parsing near '… .js,.vue src/",
npm ERR! JSON.parse },
npm ERR! JSON.parse "dependencies"…'
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.
檢查發現，結果竟然是 lint 這一行結尾多加瞭一個逗號，如下所示
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "eslint --fix --ext .js,.vue src/",
},
你可能會問，為啥沒有自動格式化呢？情景如下
電腦剛拉下來倉庫代碼；
想運行 npm run serve，結果沒有 node_modules，無法運行，所以執行 npm install；
之後執行 npm run serve，發現一大片的告警提示(Delete ␍eslint)；
打算進行一鍵修復，又想到沒有做 ESLint 一鍵修復配置，所以想把 npm run lint 加上；
加 lint 的過程中，結尾多瞭一個逗號，報錯；
重啟編輯器
VsCode 插件是否禁用
檢查一下兩個插件，如果禁用請打開
VsCode 插件 —— ESLint
VsCode 插件 —— Prettier - Code formatter
報錯 Delete ␍eslint
有幾種處理方式，目前為止我也沒有得出哪種更好的結論，大傢可以各自斟酌
全局更改 git
在 .prettierrc配置 "endOfLine": "auto"
尾聲
建議創建項目初期就使用 ESLint ，否則後期項目日益龐大，免不瞭會出現許多需要手動優化的語法錯誤，改動起來麻煩
建議代碼格式規范，在 ESLint 配置初期就定好規則，後面就不要再修改瞭。避免來回折騰，產生不必要的麻煩（畢竟不是所有的團隊成員都樂於接受這玩意）
如果要在舊項目中新增 ESLint 配置，建議先讓團隊成員把已有代碼全部都提交到 git 倉庫，然後由一人負責拉取合並代碼，運行 npm run lint 進行全局格式化處理以後，再讓團隊成員拉取一次代碼，再進行後續開發。否則，別人一提交就到處報錯，體驗感很差
建議團隊成員使用同一個 IDE，IDE 建議使用 VScode.本人沒有做過其他 IDE 下的 自動格式化 ESLint 配置，如果需要請自行摸索
以上就是vue基礎ESLint Prettier配置教程詳解的詳細內容，更多關於vue ESLint Prettier配置的資料請關註WalkonNet其它相關文章！
推薦閱讀：
- 關於eslint+prettier+husky的配置及說明
- vscode 配置eslint和prettier正確方法
- Vue3後臺管理系統之創建和配置項目
- VSCode中 Eslint 和 Prettier 沖突問題最新解決方法
- Vue中使用eslint和editorconfig方式