之前写过一篇webstorm中使用prettire统一代码风格
传送门:https://www.wangdahai.cn/web/other-extension/7302.html
然后就有小伙伴问我vscode中怎么使用,还有如何配合eslint使用。其实与什么编辑器无关,没有编辑器只要有node环境支持也一样可以使用,步骤如下:
1,只需全局安装prettier和eslint
npm install -g prettier npm install eslint -g
2,然后新建配置文件
.prettierrc.js .eslintrc.js
3,然后执行命令
prettier --write <文件路劲+文件名> eslint --fix <文件路劲+文件名>
用编辑只是简化了我们的操作,可以保存时候自动帮你执行优化修复操作了。无论是webstorm还是vscode都是有相关的插件支持的,我们要做的只是安装相应插件,然后自定义自己的规则即可。
今天就以vscode为例为大家讲解一下prettier和eslint的使用
一,安装相应插件
ESLint Prettier
二,设置
安装完成我们点开设置,然后点击右上角如图:打开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 例如:
module.exports = { // 一行最多 100 字符 printWidth: 100, // 使用 2 个空格缩进 tabWidth: 4, // 不使用缩进符,而使用空格 useTabs: false, // 行尾需要有分号 semi: false, // 使用单引号 singleQuote: true, // 对象的 key 仅在必要时用引号 quoteProps: 'as-needed', // jsx 不使用单引号,而使用双引号 jsxSingleQuote: false, // 末尾不需要逗号 trailingComma: 'none', // 大括号内的首尾需要空格 bracketSpacing: true, // jsx 标签的反尖括号需要换行 jsxBracketSameLine: false, // 箭头函数,只有一个参数的时候,也需要括号 arrowParens: 'always', // 每个文件格式化的范围是文件的全部内容 rangeStart: 0, rangeEnd: Infinity, // 不需要写文件开头的 @prettier requirePragma: false, // 不需要自动在文件开头插入 @prettier insertPragma: false, // 使用默认的折行标准 proseWrap: 'preserve', // 根据显示样式决定 html 要不要折行 htmlWhitespaceSensitivity: 'css', // 换行符使用 lf endOfLine: 'auto' }
不需要优化的文件可以设置.prettierignore文件 例如:
**/*.md **/*.svg **/*.ejs package.json package-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\n quotes: ['error', 'single'], // 使用双引号还是单引号 semi: ['error', 'never'], // 末尾是否加分号; 'comma-dangle': ['error', 'never'] // 对象数组末位要不要加逗号 } }
同样不想检测的位置可以写进.eslintignore文件,比如:
node_modules dist/ test build/
到这里prettier和eslint在vscode中的使用就讲解完毕了,赶紧愉快的撸起你的代码吧 O(∩_∩)O
评论前必须登录!
注册