安装插件prettier
打开设置的settings.json文件
增加以下项
/*
*这一段是Vue3的配置,勿删!!!
*/
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
/*
*eslint是JavaScript的语法规则校验器!
*/
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
// 保存自动修复
"eslint.autoFixOnSave": true,
// jsx自动修复有问题,取消js的format
"editor.formatOnSave": true,
//默认JavaScript格式化程序(为了更美观)
"javascript.format.enable": true,
/*
*prettier插件的配置是格式化代码,更漂亮!
*/
//如果为真,将使用单引号而不是双引号
"prettier.singleQuote": false,
//点击保存时,根据 eslint 规则自定修复,同时集成 prettier 到 eslint 中
"prettier.eslintIntegration": true,
//prettier自动格式化tab的空格数量!
"prettier.tabWidth": 4,
// Indent lines with tabs
"prettier.useTabs": true
增加eslint配置,创建.eslintrc.js
文件
module.exports = {
root: true,
env: {
node: true,
},
extends: ["plugin:vue/essential", "eslint:recommended"],
parserOptions: {
parser: "babel-eslint",
},
plugins: [
"vue", // 增加此配置项
],
rules: {
"no-console": process.env.NODE_ENV === "production" ? 1 : "off",
"no-debugger": process.env.NODE_ENV === "production" ? 1 : "off",
"no-alert": 0, //禁止使用alert confirm prompt
"vue/html-indent": [
"error",
2,
{
baseIndent: 1,
},
],
"no-const-assign": 2, //禁止修改const声明的变量
"no-empty": 2, //块语句中的内容不能为空
"no-eq-null": 2, //禁止对null使用==或!=运算符
// "no-floating-decimal": 2,//禁止省略浮点数中的0 .5
// "no-implicit-coercion": 1,//禁止隐式转换
"no-multi-spaces": 1, //不能用多余的空格
"no-nested-ternary": 0, //禁止使用嵌套的三目运算
"no-param-reassign": 2, //禁止给参数重新赋值
"no-redeclare": 2, //禁止重复声明变量
"no-mixed-spaces-and-tabs": 0,//禁止混用tab和空格
"no-trailing-spaces": 0,
"block-scoped-var": 0, //块语句中使用var
camelcase: 0, //强制驼峰法命名
// eqeqeq: 2, //必须使用全等
indent: [2, 2], //缩进风格
"key-spacing": [
0,
{
beforeColon: false,
afterColon: true,
},
], //对象字面量中冒号的前后空格
"max-params": [0, 5], //函数最多只能有3个参数
"no-unused-vars": [2, {
// 允许声明未使用变量
"vars": "local",
// 参数不检查
"args": "none"
}],
"no-undef": 1,//不能有未定义的变量
"no-trailing-spaces": 1,//一行结束后面不要有空格
"no-sparse-arrays": 2,//禁止稀疏数组, [1,,2]
"no-redeclare": 2,//禁止重复声明变量
"no-multiple-empty-lines": [1, {"max": 3}],//空行最多不能超过2行
"no-extra-semi": 2,//禁止多余的冒号
"block-scoped-var": 2,//禁止块语句中使用var
strict: 2, //使用严格模式
"vars-on-top": 2, //var必须放在作用域顶部
// "invalid-first-character-of-tag-name": 2, //三元运算符可以使用小于号
},
};
保存,项目重启 ok