vue項目中如何配置eslint和prettier
更新時間：2024年03月20日 08:51:49 作者：笑道三千
這篇文章主要介紹了vue項目中如何配置eslint和prettier問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
一、現(xiàn)象
新建vue項目后，寫完代碼后，希望能保存ctrl+s之后，自動格式化代碼
目前只是使用vue-cli腳手架創(chuàng)建的項目，雖然引入了eslint，但要想在vscode中保存代碼時，實現(xiàn)自動格式化，還需要做以下的配置。
二、安裝vscode插件
首先要確保已經(jīng)安裝了 ESLlint、Vetur、Prettier 這三個插件。
1.eslint
在團隊協(xié)作中，為避免低級 Bug、產(chǎn)出風格統(tǒng)一的代碼，會預先制定編碼規(guī)范。
使用 Lint 工具和代碼風格檢測工具，則可以輔助編碼規(guī)范執(zhí)行，有效控制代碼質(zhì)量。
ESLint 由 JavaScript 紅寶書 作者 Nicholas C. Zakas 編寫， 2013 年發(fā)布第一個版本。
NCZ 的初衷不是重復造一個輪子，而是在實際需求得不到 JSHint 團隊響應的情況下做出的選擇：以可擴展、每條規(guī)則獨立、不內(nèi)置編碼風格為理念編寫一個 lint 工具。
安裝之后：
2.Vetur
這個插件主要作用就是讓vscode識別.vue文件，實現(xiàn)語法高亮。
3.Prettier
它的作用是將我們散漫的風格迥異的代碼格式化為符合規(guī)范的代碼。
安裝之后：
三、具體使用
團隊開發(fā)寫代碼，通常會有以下這么兩個問題存在：
代碼質(zhì)量問題：使用方式有可能有問題
代碼風格問題：風格不符合一定規(guī)則
1.先談代碼質(zhì)量問題
當你安裝了插件之后，你的代碼不符合它設定的默認規(guī)范的時候，就會出現(xiàn)波浪線提示
npx eslint --init
這時候打開項目代碼，就會報錯了：
這是因為我們選擇了：“eslint-config-airbnb-base”作為eslint的默認配置，而它設定了字符串使用單引號的。
具體的默認配置可以查看：GitHub - airbnb/javascript: JavaScript Style Guide
打開.eslintrc.js文件，我們可以在rules處增加一個規(guī)則，這些規(guī)則會覆蓋剛剛我們采用的airbnb默認配置，也就是說，我們可以在這里自定義：
rules: {
quotes: [2, 'double'], //錯誤，必須雙引號
semi: [ //錯誤，必須有分號結(jié)尾
2,
'always',
{
omitLastInOneLineBlock: true,
},
],
},
于是代碼又恢復了正常：
像這樣，統(tǒng)一代碼書寫的配置，是eslint的主要用途，可以統(tǒng)一代碼，減少bug的出現(xiàn)。
但是又出現(xiàn)了新的問題，如果出現(xiàn)這個eslint配置，使用者就必須寫成這種形式，那剛開始可能會很抵觸，畢竟習慣起來需要一個過程。所以應該在使用eslint時，按ctrl+s保存代碼，能夠自動轉(zhuǎn)化為符合要求的代碼！
保存代碼時自動規(guī)范格式?
這個需要在vscode中進行配置，按住ctrl+shift+p,輸入setting,打開setting.json,完成以下配置：
{
// 保存時 prettier 自動格式化
"editor.formatOnSave": true,
// 保存時自動啟用 eslint --fix 自動修復
"editor.codeActionsOnSave": {
"source.fixAll": true,
"eslint.autoFixOnSave" : true,
},
// 配置eslint適用于vue代碼
"eslint.validate": [
"vue",
"javascript",
// "typescript",
// "typescriptreact",
// "html",
// {
// "language":"vue",
// "autoFix":true
// }
],
}
這時候，回到代碼中ctrl+s，就會發(fā)現(xiàn)逗號的問題被自動修復了。
另外，有些文件，我們并不需要用eslint作為校驗，就可以在根目錄下新建一個.eslintignore文件來管理：
.eslintrc.js .prettierrc.js babel.config.js vetur.config.js /node_modules/
2.再來談代碼風格問題
像縮進是用空格還是用tab啦，使用單引號還是雙引號啦，句末需不需要分號啦，都屬于代碼風格問題，他們影響的更多的是代碼的統(tǒng)一風格。而這些，prettier也可以進行規(guī)范。
在項目根目錄下新建.prettierrc文件，然后配置：
{
"semi": false,
"singleQuote": true
}
意思是不需要句尾分號，字符串需要單引號?？梢宰⒁獾?，我這里特地寫地和上文eslint地配置沖突了。
解決配置的沖突問題
沖突的本質(zhì)在于 eslint既負責了代碼質(zhì)量檢測，又負責了一部分的格式美化工作，格式化的部分規(guī)則和 prettier不兼容。
extends: [
'plugin:vue/essential',
'airbnb-base',
"plugin:prettier/recommended"http://這樣寫，讓pettier的規(guī)則，放在eslint規(guī)則擴展中，于是會經(jīng)由eslint報錯
],
網(wǎng)上的一些文章配置的這兩個地方的代碼，實現(xiàn)的效果和這一個extend是一樣的。
這樣設置之后，prettier的規(guī)則會放置到eslint的擴展中，報錯會經(jīng)由eslint報錯。在VSCode中配置了保存自動格式化后，eslint中將代碼進行格式化后，會重新被prettier再次格式化。因此最終的格式化效果是
Prettier提供的，然而我們代碼校驗使用的是ESLint，因此往往會出現(xiàn)沖突，最常見的沖突就是：eslint fix后變成單引號，保存（prettier）自動格式化后變成雙引號，導致代碼校驗異常。
接下來舉例兩者的沖突：
.eslint文件：必須分號結(jié)尾且雙引號
"rules": {
"quotes": [2, "double"], //警告，必須雙引號
semi: [
2,
"always",
{
omitLastInOneLineBlock: true
}
],
}
.prettierr文件：必須無分號結(jié)尾，且單引號
{
"semi": false,
"singleQuote": true
}于是會出現(xiàn)按ctrl+S，第一次報eslint配置的錯，第二次報prettier的錯，循環(huán)往復，不斷沖突。
網(wǎng)上說的讓prettier的規(guī)則覆蓋eslint的，我并沒有生效，而是像上文這樣不斷沖突。
最后的解決是把eslint和prettier中的配置弄成一致：
.eslint.js配置：
module.exports = {
env: {
browser: true,
es6: true,
node: true,
},
extends: [
'plugin:vue/essential',
'airbnb-base',
"plugin:prettier/recommended"http://這樣寫，讓pettier的規(guī)則，放在eslint規(guī)則擴展中，于是會經(jīng)由eslint報錯
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: [
'vue',
],
"rules": {
"quotes": [2, "double"], //警告，必須雙引號
"no-compare-neg-zero": 2, //禁止與 -0 進行比較
"no-cond-assign": [
2,
"except-parens"
], //禁止條件語句中出現(xiàn)賦值操作符
"no-console": 0, //允許出現(xiàn)console
"no-constant-condition": 2, //禁止在條件中使用常量表達式
"no-control-regex": 2, //禁止在正則表達式中使用控制字符
"no-debugger": 0, //可以使用debugger
"no-dupe-args": 2, //禁止 function 定義中出現(xiàn)重名參數(shù)
"no-dupe-keys": 2, //禁止對象字面量中出現(xiàn)重復的 key
"no-duplicate-case": 2, //禁止出現(xiàn)重復的 case 標簽
"no-empty": 2, //禁止出現(xiàn)空語句塊
"no-empty-character-class": 2, //禁止在正則表達式中使用空字符集
"no-ex-assign": 2, //禁止對 catch 子句的參數(shù)重新賦值
"no-extra-boolean-cast": 2, //禁止不必要的布爾轉(zhuǎn)換
"no-extra-parens": [
"error",
"functions"
], //禁止不必要的括號
"no-extra-semi": 2, //禁止不必要的分號
"no-func-assign": 2, //禁止對 function 聲明重新賦值
"no-inner-declarations": 0, //禁止在嵌套的塊中出現(xiàn)變量聲明或 function 聲明
"no-invalid-regexp": 2, //禁止 RegExp 構(gòu)造函數(shù)中存在無效的正則表達式字符串
"no-irregular-whitespace": 2, //禁止不規(guī)則的空白
"no-obj-calls": 2, //禁止把全局對象作為函數(shù)調(diào)用
"no-prototype-builtins": 2, //禁止直接調(diào)用 Object.prototypes 的內(nèi)置屬性
"no-regex-spaces": 2, //禁止正則表達式字面量中出現(xiàn)多個空格
"no-sparse-arrays": 2, //禁用稀疏數(shù)組
"no-template-curly-in-string": 0, //禁止在常規(guī)字符串中出現(xiàn)模板字面量占位符語法
"no-unexpected-multiline": 2, //禁止出現(xiàn)令人困惑的多行表達式
"no-unreachable": 2, //禁止在 return、throw、continue 和 break 語句之后出現(xiàn)不可達代碼
"no-unsafe-finally": 2, //禁止在 finally 語句塊中出現(xiàn)控制流語句
"no-unsafe-negation": 2, //禁止對關系運算符的左操作數(shù)使用否定操作符
"use-isnan": 2, //要求使用 isNaN() 檢查 NaN
"valid-jsdoc": "off", //
"valid-typeof": 2, //強制 typeof 表達式與有效的字符串進行比較
"curly": 2, //強制所有控制語句使用一致的括號風格
"consistent-return": [
2,
{
treatUndefinedAsUnspecified: true
}
],
"default-case": 2,
eqeqeq: "off",
"guard-for-in": 0,
"no-case-declarations": 0,
"no-empty-pattern": 2,
"no-fallthrough": 2,
"no-global-assign": [
2,
{
exceptions: []
}
],
"no-octal": 2,
"no-redeclare": 2,
"no-self-assign": 2,
"no-unused-labels": 2,
"no-useless-escape": 2,
strict: 2,
"no-delete-var": 2,
"no-undefined": 0,
"no-undef": 2,
"no-use-before-define": 2,
"array-bracket-spacing": [
2,
"never"
],
"block-spacing": [
2,
"always"
],
"brace-style": [
2,
"1tbs"
],
"comma-dangle": [
"error",
"never"
],
"comma-spacing": [
2,
{
before: false,
after: true
}
],
"comma-style": [
2,
"last"
],
"computed-property-spacing": [
"error",
"never"
],
"eol-last": [
2,
"always"
],
"func-call-spacing": [
"error",
"never"
],
indent: [
"error",
2,
{
SwitchCase: 1
}
],
"jsx-quotes": [
"error",
"prefer-double"
],
"key-spacing": [
"error",
{
beforeColon: false,
afterColon: true
}
],
"new-cap": [
"error",
{
newIsCap: true,
capIsNewExceptionPattern: "(Type[a-zA-Z0-9]+|Deco[a-zA-Z0-9]+)+"
}
],
"new-parens": "error",
"no-mixed-spaces-and-tabs": 2,
"no-multi-assign": "error",
"no-multiple-empty-lines": "error",
semi: [
2,
"always",
{
omitLastInOneLineBlock: true
}
],
"constructor-super": 2,
"no-class-assign": 0,
"no-const-assign": 2,
"no-this-before-super": 2,
"no-var": 2,
"no-dupe-class-members": 2,
"no-new-symbol": 2,
"require-yield": 2,
"prefer-const": 0,
}
};
.prettierrc.js的配置
module.exports = {
"arrowParens": "avoid",
"bracketSpacing": true,
"cursorOffset": -1,
"insertPragma": false,
"jsxBracketSameLine": false,
"plugins": [],
"printWidth": 80,
"proseWrap": "preserve",
"rangeStart": 0,
"requirePragma": false,
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "none",
"useTabs": false
};
vscode中的setting.json配置
當項目中沒有.prettierrc文件時，就會讓這里面的配置生效了：
{
"editor.minimap.enabled": false,
"diffEditor.ignoreTrimWhitespace": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"http.proxyAuthorization": "false",
"workbench.editor.enablePreview": false,
"workbench.startupEditor": "newUntitledFile",
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html"
},
"emmet.preferences": {
},
"emmet.showSuggestionsAsSnippets": true,
"eslint.codeAction.showDocumentation": {
"enable": true
},
//配置保存時按照eslint文件的規(guī)則來處理一下代碼
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"eslint.autoFixOnSave" : true,
},
//配置eslint適用于vue代碼
"eslint.validate": [
"vue",
"javascript",
// "typescript",
// "typescriptreact",
// "html",
// {
// "language":"vue",
// "autoFix":true
// }
],
"window.zoomLevel": -1,
"leek-fund.immersiveBackground": true,
"leek-fund.statusBarStock": [
"sh000001"
],
"interview.workspaceFolder": "C:\\Users\\10594\\.FEInterview",
"eslint.codeActionsOnSave.mode": "problems",
"eslint.format.enable": true,
"interview.updateNotification": true,
"leek-fund.fundSort": -1,
"leek-fund.funds": [
"008888",
"008087",
"161725",
"006600",
"163115",
"001576",
"160225",
"519674",
"005311"
],
"leek-fund.showEarnings": 0,
// 使能每一種語言默認格式化規(guī)則
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"javascript.validate.enable": true,
"emmet.excludeLanguages": [
"markdown"
],
/* prettier的配置 */
"prettier.printWidth": 80, // 超過最大值換行
"prettier.tabWidth": 2, // 縮進字節(jié)數(shù)
"prettier.useTabs": false, // 句尾添加分號
"prettier.singleQuote": false, // 使用單引號代替雙引號
"prettier.proseWrap": "preserve", // (x) => {} 箭頭函數(shù)參數(shù)只有一個時是否要有小括號。avoid：省略括號
"prettier.bracketSpacing": true, // 在對象，數(shù)組括號與文字之間加空格 "{ foo: bar }"
"prettier.endOfLine": "auto", // 結(jié)尾是 \n \r \n\r auto
"prettier.eslintIntegration": false, //不讓prettier使用eslint的代碼格式進行校驗
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填寫在項目的.prettierignore文件中
"prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否單獨放一行
"prettier.jsxSingleQuote": false, // 在jsx中使用單引號代替雙引號
"prettier.parser": "babylon", // 格式化的解析器，默認是babylon
"prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
"prettier.stylelintIntegration": false, //不讓prettier使用stylelint的代碼格式進行校驗
"prettier.trailingComma": "none", // 在對象或數(shù)組最后一個元素后面是否加逗號（在ES5中加尾逗號）
"prettier.tslintIntegration": false,
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}, // 不讓prettier使用tslint的代碼格式進行校驗
"vetur.experimental.templateInterpolationService": false,
"vetur.ignoreProjectWarning": true,
"prettier.arrowParens": "avoid"
}
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
在vue-cli腳手架中配置一個vue-router前端路由
這篇文章主要給大家介紹了在vue-cli腳手架中配置一個vue-router前端路由的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。
2017-07-07 
這篇文章主要討論Vue?data中隨意改一個屬性,視圖都會更新嗎?下面來自面試官的問題然后做i出的一個問題總結(jié)，具有一定的參考價值，需要的小伙伴可以參考一下
2021-12-12 
這篇文章主要為大家詳細介紹了如何使用Vue生成動態(tài)表單,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學習一下
2024-03-03 
Vue項目中使用jsonp抓取跨域數(shù)據(jù)的方法
這篇文章主要介紹了Vue項目中使用jsonp抓取跨域數(shù)據(jù)的方法，本文通過實例代碼講解的非常詳細,需要的朋友可以參考下
2019-11-11 
這篇文章主要為大家詳細介紹了vue前端信息詳情頁模板梳理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04 
我們都知道,輪播圖組件模板結(jié)構(gòu)通常是ul包裹li的結(jié)構(gòu),在vue中,li的數(shù)量也通常是由后端接口返回的數(shù)據(jù)決定,下面這篇文章主要給大家介紹了關于vue3封裝輪播圖組件功能的相關資料,需要的朋友可以參考下
2022-11-11 
這篇文章主要為大家詳細介紹了vue實現(xiàn)右側(cè)滑出層動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04 
Vue3-KeepAlive,多個頁面使用keepalive方式
這篇文章主要介紹了Vue3-KeepAlive，多個頁面使用keepalive方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08 
這篇文章主要介紹了淺談vue加載優(yōu)化策略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03