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 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
原生js实现轮播图
Feb 27 Javascript
老生常谈js数据类型
Aug 03 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
Vue实现日历小插件
Jun 26 Javascript
浅谈JS的原型和原型链
Jun 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下使用SimpleXML 处理XML 文件
2010/02/27 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
Vue精简版风格概述
2018/01/30 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
学生手册家长评语
2014/02/10 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
质量承诺书怎么写
2014/05/24 职场文书
电话客服工作职责
2014/07/27 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
工程部文员岗位职责
2015/02/04 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android