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 相关文章推荐
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
js实现div在页面拖动效果
May 04 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
React实现评论的添加和删除
Oct 20 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中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
javascript实现的动态文字变换
2007/07/28 Javascript
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
Prototype中dom对象方法汇总
2008/09/17 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
python输入多行字符串的方法总结
2019/07/02 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
python同步两个文件夹下的内容
2019/08/29 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
兰兰过桥教学反思
2014/02/08 职场文书
保研推荐信
2014/05/09 职场文书
开会通知短信大全
2015/04/20 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
活动简报范文
2015/07/22 职场文书
小学安全教育主题班会
2015/08/12 职场文书