![使用vueCli4.0配置eslint+prettier]()
使用vueCli4.0配置eslint+prettier
众所周知eslint只是个语法检查工具，要想做到真正的自动修改语法错误，还要考prettier。下面介绍两种方式，可以在VScode工具里使用。首先，所有的前提是你的vscode已经安装了prettier插件，而且我建议你开启保存时自动调整代码，文章最后附上。
下面步骤用图片代替：
![在这里插入图片描述]()
![在这里插入图片描述]()
![在这里插入图片描述]()
![在这里插入图片描述]()
![在这里插入图片描述]()
然后接下来的步骤两个可选项：
第一个
![在这里插入图片描述]()
第二个
![在这里插入图片描述]()
![在这里插入图片描述]()
![在这里插入图片描述]()
![在这里插入图片描述]()
好了，现在使用vuecli4.0生成的vue就成功了。
直接用VScode打开项目，然后在主目录添加这样这个文件：prettier.config.js。
![在这里插入图片描述]()
文件的内容主要如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| module.exports = {
printWidth: 80,
tabWidth: 2,
useTabs: false,
semi: false, // 末尾不加尾号
singleQuote: true, // 默认单引号
quoteProps: 'as-needed',
jsxSingleQuote: false,
trailingComma: 'none', // es5对象属性最后加逗号。none不加
bracketSpacing: true,
jsxBracketSameLine: false,
arrowParens: 'always',
htmlWhitespaceSensitivity: 'ignore',
vueIndentScriptAndStyle: false, // script、style标签不缩进
endOfLine: 'lf',
}
|
当然这样还没行，在.eslintrc.js文件要多一个规则：
![在这里插入图片描述]()
这里是代码：
1
| 'space-before-function-paren': 'off'
|
至此，项目就配置完成了。运行npm run serve可以项目正常运行。
补充
如何在VScode开启prettier保存时运行呢？下面是步骤：
打开设置->搜索save
![在这里插入图片描述]()
提醒
如果项目实际开发过程中有哪些eslint的报错，直接在文件中关闭即可。如果有问题可以在下面提问，一般的问题博主大概可能应该可以回答。
