VScode格式化ESlint方法(最全最好用方法)


Posted in Javascript onSeptember 10, 2019

ESlint:是用来统一JavaScript代码风格的工具,不包含css、html等。

背景:

近来研究前端,然后一直在百度上找VScode格式化(ESlint)的插件,结果找了半天都不靠谱。目前没有一个可以格式化html、css、符合ESlint的js、vue的插件,所以自己东拼西凑加实践找到解决方法。

解决方案:

1、安装插件

1)ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~

2)vetur:可以格式化html、标准css(有分号 、大括号的那种)、标准js(有分号 、双引号的那种)、vue文件,
但是!格式化的标准js文件不符合ESlint规范,会给你加上双引号、分号等,像这样

VScode格式化ESlint方法(最全最好用方法)

能把html格式化分行显示

VScode格式化ESlint方法(最全最好用方法)

3)Prettier - Code formatter:只关注格式化,并不具有eslint检查语法等能力,只关心格式化文件(最大长度、混合标签和空格、引用样式等),包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown

4)Manta's Stylus Supremacy: 格式化stylus的插件(不用就不装),因为vetur会把css格式化有分号 、大括号的那种,此插件会把css格式化成stylus风格,像这样

VScode格式化ESlint方法(最全最好用方法)

2、在vscode的文件-首选项-设置里,右侧配置里添加如下代码即可(代码有注释!),从此直接 Ctrl+S 就能一键格式化了 

VScode格式化ESlint方法(最全最好用方法)

VScode格式化ESlint方法(最全最好用方法)

代码如下:

{
   // 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 // 两个选择器中是否换行
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery中对数组的操作代码
Aug 12 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
VueRouter导航守卫用法详解
Dec 25 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
npm 语义版本控制详解
Sep 10 #Javascript
解决layui的input独占一行的问题
Sep 10 #Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 #Javascript
防止Layui form表单重复提交的实现方法
Sep 10 #Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 #Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 #Javascript
解决layui弹框失效的问题
Sep 09 #Javascript
You might like
php设计模式 Composite (组合模式)
2011/06/26 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
jquery选择器使用详解
2014/04/08 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
puppeteer库入门初探
2019/01/09 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
python读取word文档的方法
2015/05/09 Python
Python实现二维数组输出为图片
2018/04/03 Python
详解python单元测试框架unittest
2018/07/02 Python
python 多线程串行和并行的实例
2019/02/22 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
Django如何重置migration的几种情景
2021/02/24 Python
大学生个人简历自我评价
2013/11/16 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
学雷锋的心得体会
2014/09/04 职场文书
商超业务员岗位职责
2015/02/13 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
深入理解go缓存库freecache的使用
2022/02/15 Golang
Python数据结构之队列详解
2022/03/21 Python