快捷導(dǎo)航

Vue2老項目配置ESLint和Prettier完整步驟

更新時間：2024年08月14日 10:54:08 作者：扶蘇1002

ESLint是一個靜態(tài)代碼分析工具,用于檢查JavaScript代碼的語法結(jié)構(gòu)和查找程序錯誤,Prettier是一個代碼格式化工具,這篇文章主要給大家介紹了關(guān)于Vue2老項目配置ESLint和Prettier的完整步驟,需要的朋友可以參考下

接手一個老項目Vue2，由VueCli構(gòu)建，需要集成一下ESLint和Prettier，保證代碼規(guī)范

1. 安裝以下插件

安裝的時候需要指定一下版本號，太新的會有問題

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ī)范問題工具。

1.2. prettier

Prettier 是一款強大的代碼格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等語言，基本上前端能用到的文件格式它都可以搞定，是當(dāng)下最流行的代碼格式化工具。

1.3. @babel/eslint-parser

簡而言之就是一個解析器，允許您使用ESLint對所有有效的Babel代碼進(jìn)行檢查。

ESLint允許使用自定義解析器，當(dāng)使用此插件時，代碼會被Babel解析器解析，并且生成的AST被轉(zhuǎn)換成一個ESLint可以理解的符合ESTree的結(jié)構(gòu)，所有的位置信息如行列也會保留，因此可以輕松的追蹤錯誤

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ī)則來使用，相當(dāng)于代碼不符合 Prettier 的標(biāo)準(zhǔn)時，會報一個 ESLint 錯誤，同時也可以通過 eslint --fix 來進(jìn)行格式化；這樣就相當(dāng)于將 Prettier 整合進(jìn)了 ESLint 中；

1.7. eslint-plugin-vue

Vue.js的官方ESLint插件,即使用eslint檢查.vue文件的template和script

1.8. devDependencies如下

2. 項目配置

2.1. 根目錄新建.eslintrc.js

module.exports = {
	root: true, // 在根目錄下尋找.eslintrc.js文件，如果當(dāng)前工作區(qū)打開的項目不是在根目錄，則查找.eslintrc.js文件會失敗，且eslint檢查也不會生效
	env: {
		node: true
	},
	extends: [
		'plugin:vue/essential',
		'eslint:recommended',
		'plugin:prettier/recommended' // 沖突時使用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', // 不校驗組件名
		'vue/no-multiple-template-root': 0, // 不需要使用根元素包裹template的內(nèi)容
		'vue/no-mutating-props': 0, //允許子元素通過v-model修改父元素傳的props值
		'vue/no-use-v-if-with-v-for': 0, //允許v-if和v-for共存
		'vue/valid-template-root': 0, //允許只有一個template
		'no-empty': 0 //允許代碼塊為空
	}
};

2.2. 根目錄新建.eslintignore文件

eslintignore用來告訴ESLint忽略特定的文件或文件夾，不對它們進(jìn)行代碼檢查的配置文件。通常情況下，你可能會希望在項目中包含一些不需要被 ESLint 檢查的文件，比如第三方庫、自動生成的文件、測試文件等。根據(jù)項目自行配置

# 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一個對象）這里使用 .prettierrc.js文件進(jìn)行配置

module.exports = {
	printWidth: 80, // 一行最多 80 字符(默認(rèn)80)
	tabWidth: 2, // 每個tab相當(dāng)于多少個空格（默認(rèn)2）
	useTabs: true, // 是否使用tab進(jìn)行縮進(jìn)（默認(rèn)false）
	semi: true, // 行尾需要有分號(默認(rèn)true)
	singleQuote: true, // 使用單引號（默認(rèn)false）
	quoteProps: 'as-needed', // 對象的 key 僅在必要時用引號
	jsxSingleQuote: false, // jsx 不使用單引號，而使用雙引號
	trailingComma: 'none', // 多行使用拖尾逗號（默認(rèn)none）
	bracketSpacing: true, // 在對象，數(shù)組括號與文字之間加空格 "{ foo: bar }"（默認(rèn)true）
	jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的結(jié)尾，而不是另起一行（默認(rèn)false）
	htmlWhitespaceSensitivity: 'css', // 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
	arrowParens: 'avoid', // 只有一個參數(shù)的箭頭函數(shù)的參數(shù)是否帶圓括號（默認(rèn)avoid:添加括號）
	endOfLine: 'auto', // 行尾換行符
};

2.4. 根目錄新建.prettierignore

.prettierignore 文件是用來告訴 Prettier 忽略特定的文件或文件夾，不對它們進(jìn)行代碼格式化的配置文件
可根據(jù)項目自行配置

# 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 .",
},

運行npm run lint即可一鍵檢查和修復(fù)了
運行npm run lint:eslint即可使用eslint檢查修復(fù)
運行npm run lint:prettier即可使用prettier格式化了

3. vscode的配置

3.1. 安裝Eslint 和Prettier

、

3.2. 用戶配置文件settings.json配置保存自動修復(fù)代碼

在 vscode 的用戶配置文件settings.json（或者項目中的.vscode/settings.json）中需要加入以下配置，來控制保存時候就可以修復(fù)代碼

{
  /* eslint配置 */
  "eslint.enable": true, // 是否開啟eslint
  "eslint.alwaysShowStatus": true, // 底部eslint狀態(tài)欄顯示
  // code代碼保存時，自動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
})