Vscode插件安装与配置
1、格式化代码插件
自行安装插件 eslint + Prettier
保存时自动格式化
找到vscode 的settings.json文件，添加下面代码
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"vetur.format.defaultFormatter.html": "prettier",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
1. 安装依赖 @vue/eslint-config-prettier
需安装相应版本 不按版本会有一些异常报错 两个一定要安装
npm i -D prettier@2.7.1 eslint-plugin-prettier@3.4.1 @vue/eslint-config-prettier@6.0.0 -d
2、.eslintrc.js配置：
extends: ["plugin:vue/recommended", "@vue/prettier"],
@vue/prettier 一定要写在最后面
3、增加.eslintignore忽略文件配置：
build/*.js
node_modules/*
4、增加 .prettierrc.js prettier配置文件：
module.exports = {
semi: false, // 使用分号, 默认true
arrowParens: 'always',
singleQuote: true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
bracketSpacing: true, // 对象中的空格 默认true
trailingComma: 'none'
};
5、 关闭生成项目内置的eslint-loader
通过 vue.config.js 关闭 [vue-cli lintOnSave]
eslint-loader做 formate/lint + auto-fix 的前提是把项目跑起来，和使用eslint插件或者onchange npm包两种形式相比，不具有优势，且会增加编译的时间
module.exports = {
lintOnSave: false // 关闭eslint
}
