vscode支持vue-cli3构建的项目引入eslint代码检测+prettier代码美化
-
vscode 安装插件：
- Vetur
- prettier
- Eslint
-
禁用冲突的插件:
- Beautify
-
删除package.json中默认eslint的配置
image.png
- 新建
.eslintrc.js文件，对eslint进行配置，我的配置如下
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', 'eslint:recommended'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
quotes: ['error', 'single'], //强制使用单引号
semi: ['error', 'never'], //强制不使用分号结尾
eqeqeq: ['error', 'always'], // 强制在任何情况下都使用 === 和 !==
'brace-style': ['error', '1tbs', { allowSingleLine: true }] //强制在代码块中使用一致的大括号风格
},
parserOptions: {
ecmaVersion: 6,
sourceType: 'module',
parser: 'babel-eslint'
}
}
- 新建
.prettierrc文件对代码美化进行配置
{
"semi": false,
"singleQuote": true,
"printWidth": 80,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "none",
"jsxBracketSameLine": false
}
-
vscode配置工作区设置：文件->首选项->设置->工作区设置
注意eslint.validate的作用：让vscode可以高亮vue文件中的js代码eslint问题代码
image.png
{
"editor.tabSize": 2, // 所有文件缩进2个空格
"eslint.validate": [
// 让vscode可以高亮vue文件中的js代码eslint问题代码
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"editor.formatOnSave": true // 存储时自动格式代码 todo open
}
这样就实现了保存时自动格式化及美化代码啦~~
想设置eslint忽略的文件？
新建.eslintignore文件，写入想要忽略的文件夹名
node_modules
public
collect
image.png
自动保存格式化代码不生效？
文件->首选项->设置->用户设置：查看vscode用户设置里的配置是否冲突，将冲突的配置删掉即可
我的配置
image.png
github项目地址：https://github.com/SmaVivian/vue-cli3-h5-init.git
