Vue2老項(xiàng)目配置ESLint和Prettier完整步驟
接手一個(gè)老項(xiàng)目Vue2,由VueCli構(gòu)建,需要集成一下ESLint和Prettier,保證代碼規(guī)范
1. 安裝以下插件
- 安裝的時(shí)候需要指定一下版本號(hào),太新的會(huì)有問(wèn)題
npm install -D eslint@7.32.0 prettier@2.4.1 @babel/eslint-parser@7.12.16 @vue/cli-plugin-eslint@5.0.0 eslint-config-prettier@8.3.0 eslint-plugin-prettier@4.0.0 eslint-plugin-vue@8.0.3
1.1. eslint
用于檢查和標(biāo)示出ECMAScript/JavaScript代碼規(guī)范問(wèn)題工具。
1.2. prettier
Prettier 是一款強(qiáng)大的代碼格式化工具,支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等語(yǔ)言,基本上前端能用到的文件格式它都可以搞定,是當(dāng)下最流行的代碼格式化工具。
1.3. @babel/eslint-parser
簡(jiǎn)而言之就是一個(gè)解析器,允許您使用ESLint對(duì)所有有效的Babel代碼進(jìn)行檢查。
ESLint允許使用自定義解析器,當(dāng)使用此插件時(shí),代碼會(huì)被Babel解析器解析,并且生成的AST被轉(zhuǎn)換成一個(gè)ESLint可以理解的符合ESTree的結(jié)構(gòu),所有的位置信息如行列也會(huì)保留,因此可以輕松的追蹤錯(cuò)誤
1.4. @vue/cli-plugin-eslint
vue-cli的eslint 插件,檢查和修復(fù)文件
1.5. eslint-config-prettier
禁用掉了一些不必要的以及和 Prettier 相沖突的 ESLint 規(guī)則;
1.6. eslint-plugin-prettier
將 prettier 作為 ESLint 的規(guī)則來(lái)使用,相當(dāng)于代碼不符合 Prettier 的標(biāo)準(zhǔn)時(shí),會(huì)報(bào)一個(gè) ESLint 錯(cuò)誤,同時(shí)也可以通過(guò) eslint --fix 來(lái)進(jìn)行格式化;這樣就相當(dāng)于將 Prettier 整合進(jìn)了 ESLint 中;
1.7. eslint-plugin-vue
Vue.js的官方ESLint插件,即使用eslint檢查.vue文件的template和script
1.8. devDependencies如下
2. 項(xiàng)目配置
2.1. 根目錄新建.eslintrc.js
module.exports = { root: true, // 在根目錄下尋找.eslintrc.js文件,如果當(dāng)前工作區(qū)打開(kāi)的項(xiàng)目不是在根目錄,則查找.eslintrc.js文件會(huì)失敗,且eslint檢查也不會(huì)生效 env: { node: true }, extends: [ 'plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended' // 沖突時(shí)使用prettier的規(guī)則進(jìn)行覆蓋 ], parserOptions: { parser: '@babel/eslint-parser' }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'vue/multi-word-component-names': 'off', // 不校驗(yàn)組件名 'vue/no-multiple-template-root': 0, // 不需要使用根元素包裹template的內(nèi)容 'vue/no-mutating-props': 0, //允許子元素通過(guò)v-model修改父元素傳的props值 'vue/no-use-v-if-with-v-for': 0, //允許v-if和v-for共存 'vue/valid-template-root': 0, //允許只有一個(gè)template 'no-empty': 0 //允許代碼塊為空 } };
2.2. 根目錄新建.eslintignore文件
eslintignore
用來(lái)告訴ESLint
忽略特定的文件或文件夾,不對(duì)它們進(jìn)行代碼檢查的配置文件。通常情況下,你可能會(huì)希望在項(xiàng)目中包含一些不需要被ESLint
檢查的文件,比如第三方庫(kù)、自動(dòng)生成的文件、測(cè)試文件等。根據(jù)項(xiàng)目自行配置
# docker docker/ *.sh node_modules lib *.md *.scss *.woff *.ttf .vscode .idea dist mock public bin build config index.html src/assets
2.3. 根目錄新建.prettierrc.js文件
文件名可以是.prettierrc
(JSON格式)也可以是 .prettierrc.js/prettier.config.js
(js格式,需要module.exports
一個(gè)對(duì)象)這里使用 .prettierrc.js文件進(jìn)行配置
module.exports = { printWidth: 80, // 一行最多 80 字符(默認(rèn)80) tabWidth: 2, // 每個(gè)tab相當(dāng)于多少個(gè)空格(默認(rèn)2) useTabs: true, // 是否使用tab進(jìn)行縮進(jìn)(默認(rèn)false) semi: true, // 行尾需要有分號(hào)(默認(rèn)true) singleQuote: true, // 使用單引號(hào)(默認(rèn)false) quoteProps: 'as-needed', // 對(duì)象的 key 僅在必要時(shí)用引號(hào) jsxSingleQuote: false, // jsx 不使用單引號(hào),而使用雙引號(hào) trailingComma: 'none', // 多行使用拖尾逗號(hào)(默認(rèn)none) bracketSpacing: true, // 在對(duì)象,數(shù)組括號(hào)與文字之間加空格 "{ foo: bar }"(默認(rèn)true) jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的結(jié)尾,而不是另起一行(默認(rèn)false) htmlWhitespaceSensitivity: 'css', // 根據(jù)顯示樣式?jīng)Q定 html 要不要折行 arrowParens: 'avoid', // 只有一個(gè)參數(shù)的箭頭函數(shù)的參數(shù)是否帶圓括號(hào)(默認(rèn)avoid:添加括號(hào)) endOfLine: 'auto', // 行尾換行符 };
2.4. 根目錄新建.prettierignore
.prettierignore
文件是用來(lái)告訴 Prettier
忽略特定的文件或文件夾,不對(duì)它們進(jìn)行代碼格式化的配置文件
可根據(jù)項(xiàng)目自行配置
# docker docker/ *.sh node_modules lib *.md *.scss *.woff *.ttf .vscode .idea dist mock public bin build config index.html src/assets
2.5. package.json中配置新指令
"scripts": { "lint": "vue-cli-service lint", "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src", "prettier": "prettier --write .", },
運(yùn)行
npm run lint
即可一鍵檢查和修復(fù)了
運(yùn)行npm run lint:eslint
即可使用eslint檢查修復(fù)
運(yùn)行npm run lint:prettier
即可使用prettier格式化了
3. vscode的配置
3.1. 安裝Eslint 和Prettier
、
3.2. 用戶配置文件settings.json配置保存自動(dòng)修復(fù)代碼
- 在 vscode 的用戶配置文件
settings.json
(或者項(xiàng)目中的.vscode/settings.json
)中需要加入以下配置,來(lái)控制保存時(shí)候就可以修復(fù)代碼
{ /* eslint配置 */ "eslint.enable": true, // 是否開(kāi)啟eslint "eslint.alwaysShowStatus": true, // 底部eslint狀態(tài)欄顯示 // code代碼保存時(shí),自動(dòng)eslint修復(fù) "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["javascript", "javascriptreact", "html", "vue", "vue-html"] }
4. 如何關(guān)閉lint
- vue.config.js中配置
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, // 關(guān)閉lint lintOnSave: false })
總結(jié)
到此這篇關(guān)于Vue2老項(xiàng)目配置ESLint和Prettier的文章就介紹到這了,更多相關(guān)Vue2配置ESLint和Prettier內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue實(shí)現(xiàn)父子組件雙向綁定的方法總結(jié)
Vue.js 是一種流行的 JavaScript 框架,它提供了一種簡(jiǎn)單且高效的方式來(lái)構(gòu)建用戶界面,在 Vue 中,父子組件之間的雙向綁定是一種常見(jiàn)的需求,下面我們就來(lái)學(xué)習(xí)一下vue中父子組件雙向綁定的常用方法吧2023-10-10vue2+elementui的el-table固定列會(huì)遮住橫向滾動(dòng)條及錯(cuò)位問(wèn)題解決方案
這篇文章主要介紹了vue2+elementui的el-table固定列會(huì)遮住橫向滾動(dòng)條及錯(cuò)位問(wèn)題解決方案,主要解決固定列錯(cuò)位后, 接下來(lái)就是把固定列往上提滾動(dòng)條的高度就不會(huì)影響了,需要的朋友可以參考下2024-01-01vue開(kāi)發(fā)中的base和publicPath的區(qū)別
本文主要介紹了vue開(kāi)發(fā)中的base和publicPath的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07Vue3使用src動(dòng)態(tài)引入本地圖片的詳細(xì)步驟
這篇文章主要給大家介紹了關(guān)于Vue3使用src動(dòng)態(tài)引入本地圖片的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-12-12解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問(wèn)題
這篇文章主要介紹了解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08vue前端實(shí)現(xiàn)login頁(yè)登陸驗(yàn)證碼代碼示例
現(xiàn)在我們管理后臺(tái)有個(gè)需求,就是登錄頁(yè)面需要獲取驗(yàn)證碼,用戶可以輸入驗(yàn)證碼后進(jìn)行登錄,這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)login頁(yè)登陸驗(yàn)證碼的相關(guān)資料,需要的朋友可以參考下2024-05-05Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫(huà)的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫(huà)的示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01淺析Proxy如何實(shí)現(xiàn)Vue響應(yīng)式
這篇文章主要是來(lái)和大家探討一下,Vue的響應(yīng)式系統(tǒng)僅僅是一個(gè)Proxy嗎,本文將圍繞此問(wèn)題探索一下Proxy是如何實(shí)現(xiàn)Vue響應(yīng)式的,感興趣的小伙伴可以了解一下2023-08-08