vue2+webpack+eslint配置
目前主流項目都在使用vue3+vite，因此針對eslint的配置做了一下總結(jié)。
引入ESlint、pritter
安裝插件，執(zhí)行以下命令
// eslint
// prettier
// eslint-plugin-vue
// eslint-config-prettier
// eslint-plugin-prettier
yarn add eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --save-dev
執(zhí)行上述命令，package.json 中 會自動添加以下內(nèi)容
...
"dependencies": {
"eslint": "^8.46.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-vue": "^9.17.0",
"prettier": "^3.0.1",
...
}
...
創(chuàng)建.eslintrc.js
在在根目錄創(chuàng)建 .eslintrc.js 文件 （命令方式）
// 生成文件
vi .eslintrc.js
// 進入編輯模式
i
// 報錯更改
wq
.eslintrc.js 文件的內(nèi)容
module.exports = {
extends: [
'plugin:vue/vue3-recommended',
'prettier',
'prettier/vue'
],
plugins: ['vue', 'prettier'],
rules: {
'prettier/prettier': 'error'
}
};
創(chuàng)建 .prettierrc.js 文件
在項目根目錄下創(chuàng)建一個名為 .prettierrc.js 的文件，并添加以下內(nèi)容
// semi（是否使用分號）
// singleQuote（是否使用單引號）
// trailingComma（是否使用尾逗號）
// printWidth（行的最大長度）
// tabWidth（縮進的空格數(shù)）
module.exports = {
printWidth: 120,
tabWidth: 2,
useTabs: false,
semi: false,
singleQuote: true,
quoteProps: 'as-needed',
jsxSingleQuote: false,
trailingComma: 'none',
bracketSpacing: true,
bracketSameLine: false,
arrowParens: 'always',
requirePragma: false,
insertPragma: false,
proseWrap: 'never',
htmlWhitespaceSensitivity: 'strict',
vueIndentScriptAndStyle: true,
endOfLine: 'lf'
};
配置 VS Code 編輯器
安裝 ESLint 和 Prettier - Code formatter （下圖以Prettier - Code formatter 為例）
打開VS Code 的設(shè)置
重點提示：
記得一定選擇工作區(qū)！??！
如果你的所有項目的技術(shù)棧都一致，那么可以選擇用戶
如果不一致 選擇工作區(qū)，則會只影響當(dāng)前項目
點擊工作區(qū)，搜索 Preferences，找到Settings
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[vue]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
]
保存后，項目的根目錄會出現(xiàn)此文件
文章來源：http://www.zghlxwxcb.cn/news/detail-637571.html
小結(jié)
統(tǒng)一代碼風(fēng)格：ESLint 和 Prettier 可以強制執(zhí)行一致的代碼風(fēng)格規(guī)范，確保團隊成員編寫的代碼風(fēng)格一致，提高代碼的可讀性和可維護性。
檢測潛在問題：ESLint 可以檢測出代碼中的潛在問題和錯誤，例如未聲明的變量、未使用的變量、不必要的代碼等，幫助開發(fā)者在開發(fā)過程中發(fā)現(xiàn)并修復(fù)這些問題。
自動格式化：Prettier 可以自動格式化代碼，使代碼保持一致的縮進、換行、引號等格式，減少手動調(diào)整代碼格式的時間和工作量。文章來源地址http://www.zghlxwxcb.cn/news/detail-637571.html
到了這里，關(guān)于vscode vue3+vite 配置eslint的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
