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 相关文章推荐
分享几个超级震憾的图片特效
Jan 08 Javascript
JS跨域总结
Aug 30 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
Vue中props的详解
May 16 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
vue递归获取父元素的元素实例
Aug 07 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判断是否为空的几个函数对比
2015/04/21 PHP
php强制下载文件函数
2016/08/24 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
Python入门篇之函数
2014/10/20 Python
Python中转换角度为弧度的radians()方法
2015/05/18 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
超市开学活动方案
2014/03/01 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
网络营销策划方案
2014/06/04 职场文书
群众路线调研报告范文
2014/11/03 职场文书
2014年应急工作总结
2014/12/11 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
JavaScript执行机制详细介绍
2021/12/06 Javascript