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 相关文章推荐
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
jquery实现显示已选用户
Jul 21 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
小程序调用微信支付的方法
Sep 26 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获取金书网的书名的实现代码
2010/06/11 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
浅谈JS继承_借用构造函数 & 组合式继承
2016/08/16 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
小程序实现录音功能
2020/09/22 Javascript
Python学习资料
2007/02/08 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
如何一键升级Python所有包
2020/11/05 Python
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
平面设计师的工作职责
2013/11/21 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
小孩不笨观后感
2015/06/03 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
TV动画《间谍过家家》公开PV
2022/03/20 日漫
python三子棋游戏
2022/05/04 Python
A22国内电台短波广播频率表
2022/05/10 无线电