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 win 7透明弹出层效果的简单代码
Aug 06 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
vue之nextTick全面解析
May 17 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
vue.js实现简单购物车功能
May 30 Javascript
浅谈JavaScript作用域
Dec 06 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过滤html标记属性类用法实例
2014/09/23 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
php链表用法实例分析
2015/07/09 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
Python使用chardet判断字符编码
2015/05/09 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
维也纳通行证:Vienna PASS
2019/07/18 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
商务英语专业应届毕业生求职信
2013/10/28 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
给国外客户的邀请函
2014/01/30 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
中学生运动会口号
2014/06/07 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
python之django路由和视图案例教程
2021/07/26 Python