安装vscode插件：
eslint
vue-offical
prettier、prettier eslint
- 项目中安装eslint
npm i eslint -D
1.1 eslint初始化
eslint --init
使用standard风格：
How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Standard
? What format do you want your config file to be in? JSON
Checking peerDependencies of eslint-config-standard@latest
? The style guide "standard" requires eslint@^8.0.1. You are currently using eslint@4.6.1.
Do you want to upgrade? Yes
选择完成后会自动安装一些eslint相关的依赖包，默认是用npm安装，安装完会自动生成一个.eslintrc.js文件。
1.2 安装其他eslint相关依赖包
npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue vue-eslint-parser -D
package.json目录：
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^8.11.0",
"@typescript-eslint/parser": "^8.11.0",
"eslint": "^8.57.1",
"eslint-config-standard": "^17.1.0",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-n": "^16.6.2",
"eslint-plugin-promise": "^6.6.0",
"eslint-plugin-vue": "^9.29.1",
"typescript": "^5.5.3",
"vite": "^5.4.1",
"vue-eslint-parser": "^9.4.3",
}
.eslintrc.json配置：
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"standard"
],
// vue-eslint-parser 用来解析.vue后缀文件，使得eslint能解析<template>标签中的内容，而 @typescript-eslint/parser 用来解析vue文件中<script>标签中的代码。
"parser": "vue-eslint-parser",
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
"plugins": [
"vue",
"@typescript-eslint"
],
"rules": {
}
}
.eslintignore文件：
node_modules
dist
- 配置prettier
2.1 项目中安装prettier
npm i prettier -D
2.2 在.eslintrc.js文件的extends最后加上plugin:prettier/recommended（PS：extends 的顺序后面会覆盖前面，prettier的配置必须放在最后) 在plugins中加上@vue/prettier
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"standard",
"plugin:prettier/recommended"
],
// vue-eslint-parser 用来解析.vue后缀文件，使得eslint能解析<template>标签中的内容，而 @typescript-eslint/parser 用来解析vue文件中<script>标签中的代码。
"parser": "vue-eslint-parser",
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
"plugins": [
"vue",
"@typescript-eslint",
"@vue/prettier" // prettier配置
],
"rules": {
}
}
- 解决eslint和prettier的冲突
3.1 安装 eslint-config-prettier
npm i eslint-config-prettier -D
eslint-plugin-prettier插件会调用prettier对项目的代码风格进行检查，其原理是先使用prettier对代码进行格式化，然后与格式化之前的代码进行对比，如果过出现了不一致，这个地方就会被prettier进行标记。
在rules添加：
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
]
表示被prettier标记的地方抛出错误信息。
3.2 .prettierrc.json
{
"printWidth": 80,
"tabWidth": 4,
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "auto",
"singleQuote": false,
"trailingComma": "none",
"semi": true,
"useTabs": true
}
3.3 .prettierignore
node_modules
dist
- eslintrc.json最终配置
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"standard",
"plugin:prettier/recommended"
],
// vue-eslint-parser 用来解析.vue后缀文件，使得eslint能解析<template>标签中的内容，而 @typescript-eslint/parser 用来解析vue文件中<script>标签中的代码。
"parser": "vue-eslint-parser",
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
"plugins": [
"vue",
"@typescript-eslint",
"@vue/prettier" // ++ prettier配置
],
"overrides": [
{
"files": ["*.ts", "*.vue"],
"rules": {
"no-undef": "off"
}
}
],
"rules": {
"vue/multi-word-component-names": 0, // ++ 关闭.vue文件必须是大驼峰命名的校验
// ts
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-non-null-asserted-optional-chain": "off",
// vue
"vue/no-v-html": "off",
"vue/no-v-text-v-html-on-component": "off",
"vue/html-self-closing": [
"error",
{
"html": { "void": "always", "normal": "always", "component": "always" },
"svg": "always",
"math": "always"
}
],
// prettier
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
]
}
}
- 保存自动格式
5.1 项目根目录下新建vscode>setting.json
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.fixAll.stylelint": "explicit"
},
"eslint.format.enable": true,
"eslint.validate": ["javascript", "typescript", "vue", "json"],
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[xml]": {
"editor.defaultFormatter": "redhat.vscode-xml"
},
}
