站长目录

在vscode中配置prettier和eslint来统一我们的代码规范


更新时间:2022-04-15 11:46:51 / 浏览:

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

npminstall-gprettiernpminstalleslint-g

2,然后新建配置文件

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

ESLintPrettier

在vscode中配置prettier和eslint来统一我们的代码规范

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

在vscode中配置prettier和eslint来统一我们的代码规范

在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


相关标签: cssemES6eslintexportexportsipjsjsonmodule.exportsnpmprettiertabvscodewebstormwhitespacewindows代码规范标签空格编辑器配置prettier和eslint验证其他

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

发表评论

温馨提示

做上本站友情链接,在您站上点击一次,即可自动收录并自动排在本站第一位!
<a href="https://www.zzdir.com/" target="_blank">站长目录</a>