之前写过一篇webstorm中使用prettire统一代码风格

npminstall-gprettiernpminstalleslint-g

2，然后新建配置文件

今天就以vscode为例为大家讲解一下prettier和eslint的使用

ESLintPrettier

安装完成我们点开设置，然后点击右上角如图：打开settings.json

在settings.json中粘贴如下代码

设置文件的默认格式化工具为prettier

"prettier.tabWidth":4,"[html]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"[javascript]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"[json]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"[css]":{"editor.defaultFormatter":"esbenp.prettier-vscode"}

设置文件保存后使用eslint自动验证修复

"editor.codeActionsOnSave":{"source.fixAll.eslint":true},"eslint.validate":["javascript"]

设置保存自动运行格式化,即运行prettier(因为们设置了默认格式化工具为prettier)

"editor.formatOnSave":true

到这里就已经可以使用了，如果需要自定义配置请继续往下看

配置自定义规则可以在settings.json中配置，也可以在单独的配置文件中配置

新建prettier配置文件.prettierrc.js例如：

**/*.md**/*.svg**/*.ejspackage.jsonpackage-lock.json

新建eslintrc配置文件.eslintrc.js例如：

module.exports={env:{browser:true,//启用浏览器全局变量。commonjs:true,//CommonJS全局变量和CommonJS范围。es6:true//启用ES6的功能。},//规则("off"或0-关闭规则、"warn"或1-将该规则作为警告、"error"或2-将规则作为错误)rules:{indent:['error',4],//缩进使用几个空格'linebreak-style':['error','windows'],//(unix|windows)使用windows行结束符：\r\nquotes:['error','single'],//使用双引号还是单引号semi:['error','never'],//末尾是否加分号;'comma-dangle':['error','never']//对象数组末位要不要加逗号}}

同样不想检测的位置可以写进.eslintignore文件，比如：

node_modulesdist/testbuild/

到这里prettier和eslint在vscode中的使用就讲解完毕了，赶紧愉快的撸起你的代码吧O(∩_∩)O

相关标签： css、 em、 ES6、 eslint、 export、 exports、 ip、 js、 json、 module.exports、 npm、 prettier、 tab、 vscode、 webstorm、 white、 space、 windows、 代码规范、 标签、 空格、 编辑器、 配置prettier和eslint、 验证、 其他、

上一篇：EJS模板引擎如何在客户端浏览器直接使用...
下一篇：PHP环境安全加固方案之php.ini文件的配置...