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 判断元素上是否绑定了事件
Oct 28 Javascript
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
使用js 设置url参数
Jul 08 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 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
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
axios学习教程全攻略
2017/03/26 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
利用Python实现命令行版的火车票查看器
2016/08/05 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
工商管理系学生的自我评价分享
2013/11/29 职场文书
目标责任书范文
2014/04/14 职场文书
2014年实验室工作总结
2014/12/03 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
无故旷工检讨书
2015/08/15 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL