/* 开启保存时自动格式化 */ "editor.formatOnSave": true, /* eslint的配置 */ "eslint.enable": true, "eslint.run": "onSave", "eslint.options": { "extensions": [ ".js", ".vue" ] }, "editor.codeActionsOnSave": { "source.fixAll.eslint": true // 保存时自动修复 }, // 关闭 vscode 默认的检查工具 "html.validate.scripts": false, "javascript.validate.enable": false, "eslint.alwaysShowStatus": true, "eslint.format.enable": true, "scss.lint.duplicateProperties": "error", "css.lint.duplicateProperties": "error", "less.lint.zeroUnits": "error", "eslint.validate": [ "javascript", "javascriptreact", "vue-html", "vue", "html" ], /* prettier的配置 */ "prettier.printWidth": 120, // 超过最大值换行 "prettier.tabWidth": 2, // 缩进字节数 "prettier.useTabs": true, // 缩进使用tab "prettier.semi": false, // 句尾添加分号 "prettier.singleQuote": true, // 使用单引号代替双引号 "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行 "prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号 "prettier.bracketSpacing": true, // 在对象,数组括号与文字之间加空格 "{ foo: bar }" "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto "prettier.htmlWhitespaceSensitivity": "ignore", "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中 "prettier.requireConfig": false, // Require a "prettierconfig" to format prettier "prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号 /* 每种语言默认的格式化规则 */ "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
使用 vuecli 创建项目时,不选择 lint 选项。
在项目开发依赖中,加入@vue/cli-plugin-eslint、babel-eslint、eslint、eslint-plugin-vue、prettier、prettier-eslint 依赖
npm install @vue/cli-plugin-eslint babel-eslint eslint eslint-plugin-vue prettier prettier-eslint –-save-dev
在项目 package.json 内加入 lint 命令。
开发时,保存文件,即可按 prettier 规则格式化文件,并自动修复可修复的 issue,不能自动修复的,请根据提示,手动修复。
提示:vscode 已设置保存时格式化,但有时并不会格式化文件。已保存的文件还存在报错的,请手动格式化,并修改相应问题后,再次保存。
提交代码前,运行 npm run lint 代码风格检查,确认无误后再进行提交。