安装插件
prettier 代码格式化工具
安装后格式化代码(alt + shift + f)的同时也可以自动修复小问题。
配置文档:官方文档
配置方式:
- VSCode 全局配置：
settings.json - 项目特殊配置: 项目目录下创建
.prettierrc
常用配置项:
- eslintIntegration: 让prettier使用eslint的代码格式进行校验, true
- stylelintIntegration: true
- tabWidth: tab 宽度, 2
- semi: 是否使用分号结尾, false
- trailingComma: 尾后是否加逗号, es5 - 在ES5中有效的尾随逗号
- singleQuote: 使用单眼号，true
ESLint 代码检查工具
Vetur: vue 相关工具
代码语法高亮，快捷键
Vue 2 Snippets 快捷键
和 Vetur 功能有重复的地方，不过个人认为这个好用点。
具体配置
VSCode 全局设置
VSCode settings.json 文件添加下面设置：
可能与你原来的设置有重复的项目，按照你自己需要选择即可
"eslint.validate": [
"javascript",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": false
}
],
"eslint.autoFixOnSave": false,
"[css]": {
"editor.defaultFormatter": "MikeBovenlander.formate"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.eslintIntegration": true,
"prettier.semi": true,
"prettier.singleQuote": true,
"prettier.disableLanguages": ["html"],
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.validation.template": false,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
}
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
项目中 ESLint 设置
.eslintrc.js:
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/essential', '@vue/prettier'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'prettier/prettier': 'off',
},
parserOptions: {
parser: 'babel-eslint',
},
};
项目依赖相关
"devDependencies": {
"@vue/cli-plugin-babel": "^3.6.0",
"@vue/cli-plugin-eslint": "^3.6.0",
"@vue/cli-service": "^3.6.0",
"@vue/eslint-config-prettier": "^4.0.1",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"lint-staged": "^8.1.5",
"vue-template-compiler": "^2.5.21"
}
版本号可能需要升级，创建于: 2019/4/19
