vscode如何自动格式化js代码-ESlint
2018-12-12 14:44
1146 查看
ESlint:是用来统一JavaScript代码风格的工具,不包含css、html等。
解决方案:
1、安装插件
1)**ESlint:**javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~
2)**vetur:**可以格式化html、标准css(有分号 、大括号的那种)、标准js(有分号 、双引号的那种)、vue文件,
**但是!**格式化的标准js文件不符合ESlint规范,会给你加上双引号、分号等,像这样
不好.png
好.png
Prettier - Code formatter:只关注格式化,并不具有eslint检查语法等能力,只关心格式化文件(最大长度、混合标签和空格、引用样式等),包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown
Manta’s Stylus Supremacy: 格式化stylus的插件(不用就不装),因为vetur会把css格式化有分号 、大括号的那种,此插件会把css格式化成stylus风格,像这样:
图片.png
2、在vscode的文件-首选项-设置里,右侧配置里添加如下代码即可(代码有注释!),从此直接 Ctrl+S 就能一键格式化了
图片.png
图片.png
代码如下:
{ // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候自动格式化 "editor.formatOnSave": true, // #每次保存的时候将代码按eslint格式进行修复 "eslint.autoFixOnSave": true, // 添加 vue 支持 "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], // #让prettier使用eslint的代码格式进行校验 "prettier.eslintIntegration": true, // #去掉代码结尾的分号 "prettier.semi": false, // #使用带引号替代双引号 "prettier.singleQuote": true, // #让函数(名)和后面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #这个按用户自身习惯选择 "vetur.format.defaultFormatter.html": "js-beautify-html", // #让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" // #vue组件中html代码格式化样式 } }, // 格式化stylus, 需安装Manta's Stylus Supremacy插件 "stylusSupremacy.insertColons": false, // 是否插入冒号 "stylusSupremacy.insertSemicolons": false, // 是否插入分好 "stylusSupremacy.insertBraces": false, // 是否插入大括号 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行 "stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行 }阅读更多
相关文章推荐
- 为什么VSCode的JS编辑模式频繁地自动格式化代码,打字时稍微停顿一下光标就移动到分号处还得手动弄回来,体验很差
- 挖坑指南:ESLint + VS Code自动格式化代码
- vsCode 设置vue 保存自动格式化代码
- 解决vscode中自动格式化stylus以及js自动将单引号转换成双引号
- Vue-cli Eslint在vscode里代码自动格式化的方法
- 如何格式化被压缩的JS代码以方便阅读
- 解决VS Code .vue文件代码无法格式化问题
- 如何设置eclipse格式化代码时不自动换行
- 利用vscode调试编译后的js代码详解
- Eclipse如何自动提示js代码
- Mac上的VSCode中格式化代码报错
- Codeblocks自动代码格式化
- 如何让eclipse自动格式化代码时不换行
- VS Code .vue文件代码缩进以及格式化代码
- vscode 如何创建自定义代码片段
- 利用types增强vscode中js代码提示功能详解
- 如何在VSCode中同步代码到github (on Mac)
- 亲测可用!!!golang如何在idea中保存时自动进行代码格式化
- vscode格式化代码无效--可能的解决方法
- 如何在 "万一的 Delphi 博客" 回复自动格式化的着色代码?