最终的效果，应该是：在保存时，vscode会按照相关的规范及样式去自动修复我们写的代码，如果并非如此，可能你要检查一下相关步骤是否正确。最简单的测试是是写个var a=1;，保存时会自动修复成const a = 1，并且报错a声明了但没使用过（当然了，她甚至能帮你优化三元表达式）。
项目生成（create-vue脚手架）
vs code安装相关插件
eslint 和 prettier
.vscode文件夹中添加settings.json文件
建议eslint 和 prettier的相关配置写在此处，而不应该写在编译器的全局配置中，因为这是和项目相关的，每个项目的配置可能会不同
{
//保存时格式化
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"git.ignoreLimitWarning": true,
"eslint.options": {
// 读取相关文件配置，注意带文件名后缀
// "configFile": ".eslintrc.js", // 旧版eslint
"overrideConfigFile": ".eslintrc.js", // 新版eslint
},
"editor.tabSize": 2,
// "json.schemaDownload.enable": false, // 设置为离线模式,以去除警告
}
配置eslint（使用airbnb规范）
安装依赖
如果依赖在项目中已存在，则可以不重复安装
pnpm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser typescript eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue
如果需要将错误输出到控制台和网页上，则需要再安装以下依赖
pnpm install -D vite-plugin-eslint
在vite.config.js中引入并配置
// 引入
import eslintPlugin from 'vite-plugin-eslint'
// 增加eslintPlugin()
export default defineConfig({
plugins: [vue(),eslintPlugin()],
})
.eslintrc.js文件
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
extends: ['plugin:vue/vue3-essential', 'eslint:recommended', 'airbnb-base', '@vue/eslint-config-prettier'],
plugins: ['vue', '@typescript-eslint'],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
parser: '@typescript-eslint/parser',
sourceType: 'module',
},
env: {
browser: true,
es2022: true,
node: true,
'vue/setup-compiler-macros': true,
},
rules: {
// "off" or 0 - 关闭规则
// "warn" or 1 - 开启规则,不符合的警告
// "error" or 2 - 开启规则,不符合的报错
'prettier/prettier': 'error',
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 关闭控制台输出校验
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'import/no-absolute-path': 'off', // 关闭绝对路径校验
'vue/no-multiple-template-root': 'off', // 关闭多根节点校验
// 'linebreak-style': ['off', 'error', 'windows'], // 告诉编译器这是win环境,去掉LF与CRLF符号校验问题
'vue/max-attributes-per-line': [
'error',
{
singleline: 5,
multiline: {
max: 1,
// allowFirstLine: false,
},
},
], // 强制标签每行最大属性数
'max-len': ['warn', { code: 130 }], // 最大长度超过130则警告
'vue/html-self-closing': 'off', // 不强制使用闭合标签
'vue/singleline-html-element-content-newline': 'off', // 单行元素换行符
'vue/multiline-html-element-content-newline': 'off', // 多行元素换行符
'vue/name-property-casing': ['error', 'PascalCase'], // vue组件name强制使用驼峰命名
'vue/html-closing-bracket-newline': 'off', // 可以在便签右便签使用换行符
'vue/no-use-v-if-with-v-for': 'warn', // 允许v-for 和 v-if 作用在同一元素上
'prefer-const': [
'error',
{
ignoreReadBeforeAssign: false,
},
], // 要求使用 const 声明那些声明后不再被修改的变量
'no-plusplus': 'off', // 不禁止使用++和--
'import/extensions': 'off', // 不统一引入扩展名
'import/no-unresolved': 'off', // 不禁止不识别的引入
'global-require': 'off', // 关闭强制在模块顶部调用规则
'no-bitwise': 'off', // 允许使用 |
'no-shadow': ['error', { allow: ['state'] }], // 添加白名单
'import/no-extraneous-dependencies': ['off', { devDependencies: true }], // 关闭关于开发依赖引入的校验
},
'import/prefer-default-export': 'off', // 不校验一个导出时必须使用default
}
新建.eslintignore文件以忽略某些不需要校验的文件
node_modules
dist
# 以下文件使用了svg,直接忽略校验，或者添加相应配置
src/components/icons
配置Prettier
安装依赖
pnpm install -D @vue/eslint-config-prettier eslint-plugin-prettier prettier
新建.prettierrc.js文件
module.exports = {
// 一行的字符数，如果超过会述行换行，對认为80
printWidth: 130,
// 一个tab代表几介空替数
tabWidth: 2,
// 是否使用tab这行缩进，甜机为false，表示用空格进行缩进
useTabs: false,
// 字符串是否使用单引号,默认为false,使用双引号
singleQuote: true,
// 行末是否使用分号,默认为true
semi: false,
// 是否使用尾逗号，有三个可选值"<none | es5 | alL>"
trailingComma: 'all',
// 对象大括号是否有空格,默认为true,效果{ foo: bar }
bracketSpacing: true,
// 代妈的解析引攀，默认为badylon,与babel相同
// "parser":"babylon"
endOfLine: 'auto',
// 开启eslint支持
eslintIntegration: true,
}
