webstorm vscode vue项目使用eslint+prettier自动格式化代码

eslint+prettier自动格式化代码

1.两个依赖

需要你的vue项目已经使用了eslint+prettier，你可以在创建项目的时候选择eslint+prettier，如下图：

当然，对于老项目，你也可以选择自己安装相关依赖，就是稍微繁琐一些…

2.eslint

eslint：JavaScript 代码检测工具
js相当随意，对于字符串，你可以使用

''

""

;

3.prettier

eslint可以制定规则，但是每条规则都自己制定，又繁琐又不一定就是最好的
这时prettier就是一个不错的选择，他提供了一套格式化代码的规则，当然，你也可以自定义某些规则

4.配置 prettier 不符合规则就报错

在eslint的配置文件中的rules加入规则

"prettier/prettier": "error"

5.格式化代码 修复错误

我们先选择使用webstorm的格式化代码试试，ctrl+alt+l发现并不能修复，这是因为webstorm的格式化规则和prettier的规则并不相同
正确的方式：鼠标右击->Fix Eslint Problems，整个文件的代码就会被格式化

tips：在webstorm，我们可以把Fix Eslint Problems映射到快捷键，以后就不需要动鼠标了

6.自定义规则

我们可以使用以下方式自定义一些规则，如：强制使用单引号’ ’

其他配置项参考官网：配置项

7.使用file watchers(文件监视者) 在保存时自动格式化代码

我们选择监视vue文件，点击确定保存（可以多设置几个监视器，如图7-1，但不建议监视Any）
来到一个vue组件，我们随便输入一些东西，然后 ctrl+s 保存
我们发现，单引号

''

""

""

8.格式化优先级问题

我们现在有3种格式化代码的方式，分别是 A：ctrl+alt+l webstorm格式化、 B：Fix Eslint Problems使用eslint格式化（继承了prettier规则）、 C：ctrl+s使用webstorm自带的prettier插件格式化
他们的优先级为A<B<C，所有出现了 7 最后的情况

9.给webstorm自带的prettier插件设置规则

如图：我们给prettier插件设置强制使用单引号

''

''

10.思考

what？同样的规则要在

prettier插件

eslint

prettier插件

eslint

11.优化

在项目根目录新建

.prettierrc.js

prettier.config.js

module.exports = {
printWidth: 120,
singleQuote: true, // 强制使用单引号
vueIndentScriptAndStyle: true, // vue文件的script标签和Style标签下的内容需要缩进
semi: false, // 语句末尾不使用分号
quoteProps: 'consistent' // 如果对象中至少有一个属性需要用引号引起来，就把所有属性用引号引起来
}

参考官网：配置文件
至此，全部设置完成
tips：

prettier插件

eslint

12.总结

别看我叽叽歪歪说了一堆，其实就2步
A：使用file watchers(文件监视者) 在保存时自动格式化代码，即第7
B：在项目根目录新建配置文件并设置自定义的配置，即第11
或者
A：自定义规则即第6
B：Fix Eslint Problems映射到快捷键（如果映射成ctrl+s那效果就是一样的啦，不过我没试过，感兴趣的小伙伴可以试试）

写这么多，这么细，其实也是做个记录，这东西做一次就基本不再做了，要是哪天搞个新项目，记不起来还能看看！

13.以上都是webstorm的，vscode就很简单啦

"files.autoSave": "afterDelay",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},

即保存时使用eslint格式化
其他的编辑器请自行百度…