插件准备
eslint
使用 eslint 需要安装 eslint 插件,并在项目第一次打开时 allow 同意使用本机的 eslint :
prettier
使用 prettier 需要安装相应的插件:
1、安装eslint依赖
npm install eslint --save-dev
初始化eslint
npx eslint --init
根据提示选择合适自己的选项,初始化完成之后项目中会出现eslintrc.js目录,
接下来对.eslintrc.js文件进行配置
// eslint-disable-next-line no-undef
module.exports = {
env: {
browser: true,
es2021: true,
"vue/setup-compiler-macros": true,
},
parser: "vue-eslint-parser",
extends: ["eslint:recommended", "plugin:vue/vue3-essential", "@vue/prettier"],
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
},
plugins: ["vue"],
rules: {
'prettier/prettier': ['error', { singleQuote: true }],
"no-console": import.meta.env.MODE === "production" ? "warn" : "off",
"no-debugger": import.meta.env.MODE === "production" ? "warn" : "off",
},
overrides: [],
};
安装prettier依赖
3个依赖prettier、eslint-plugin-prettier、@vue/eslint-config-prettier
npm install prettier eslint-plugin-prettier @vue/eslint-config-prettier --save-dev
在package.json同级的根目录新建 .prettierrc.js,兼容格式化规则
module.exports = {
printWidth: 300, // 行长规则通常设置为100或120
tabWidth: 2, // tab缩进大小, 默认为2
useTabs: false, // 使用tab缩进, 默认false
semi: false, // 行末分号, 默认true
singleQuote: true, // 使用单引号, 默认false
trailingComma: 'none', // 结尾是否强制添加逗号,默认none, 可选 none|es5|all
endOfLine: 'auto', // 定义结尾换行符 \n \r \n\r,默认auto
disableLanguages: ['vue'], // 不格式化vue文件,vue文件的格式化单独设置
bracketSpacing: true, // 在对象,数组括号与文字之间加空格 "{ foo: bar }"
jsxSingleQuote: false, // jsx中是否使用单引号, 默认false
jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行, 默认false
arrowParens: "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号, avoid: 省略括号
}
VSCode配置
打开vscode,左上角标签 文件-首选项-设置,输入settings回车搜索,点击进入settings.json文件
settings.json文件配置:
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"cSpell.userWords": ["vite", "vuex"], // 是一个检测语法拼写的插件的用户自定义库,用于处理一些自定义词汇合法性
"workbench.iconTheme": "vscode-icons", // 图标
"editor.formatOnSave": false, // 保存时格式化
"editor.formatOnPaste": false, // 粘贴时自动格式化
"vsicons.dontShowNewVersionMessage": true, // 不再显示vscode新版本信息
"window.zoomLevel": 1, // 窗口缩放比率
"security.workspace.trust.untrustedFiles": "open", // 允许打开不信任文件
"bracket-pair-colorizer-2.depreciation-notice": false,
"volar.splitEditors.layout.right": ["template", "customBlocks"],
"emmet.triggerExpansionOnTab": true,
"volar.autoCompleteRefs": true
}
package.json添加一下lint格式化
"scripts": {
"lint": "eslint src/**/*.{js,jsx,vue,ts,tsx} --fix"
}
总结
总的来看,强烈推荐使用 prettier 进行代码格式化。
经过以上配置VSCode+Eslint+Prettier已经很很好的兼容了,刚配置完没生效的话,重启一下vscode就好了,配置的过程中有问题的话,欢迎评论区提问