详解Vscode中使用Eslint终极配置大全


Posted in Javascript onNovember 08, 2019

在 vue项目中使用vscode编辑时,使用了如下这套配置,保存时就会根据既定vue项目中.eslintrc.js文件设置的既定规则自动校验并依据规则修复代码。

需安装插件

主要是这两个插件:

  • ESLint
  • Prettier - Code formatter

详解Vscode中使用Eslint终极配置大全

个人现用vscode插件截图.png

vscode中setting.json中配置

{
 // 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,
 "window.zoomLevel": 0 // 两个选择器中是否换行
}

vue项目中.eslintrc.js文件常用个性化配置

// https://eslint.org/docs/user-guide/configuring

module.exports = {
 root: false,
 parserOptions: {
  parser: 'babel-eslint'
 },
 env: {
  browser: true
 },
 extends: [
  // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
  // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
  'plugin:vue/essential',
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  'standard'
 ],
 // required to lint *.vue files
 plugins: ['vue'],
 // add your custom rules here
 rules: {
  // allow async-await
  'generator-star-spacing': 'off',
  // allow debugger during development
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  eqeqeq: 'off', // 不能始用==
  'no-unused-vars': 'off', // 消除未使用的变量
  'no-undef': 'off', // 未使用变量报错
  'no-unreachable': 'off' // 不能执行的代码检测
   //此处一下还可以根据个人习惯设置更多个性化内容
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中检测变量的类型的代码
Dec 28 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
详解vuex的简单使用
Mar 12 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
nginx部署多个vue项目的方法示例
Sep 06 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 #Javascript
Vuex中实现数据状态查询与更改
Nov 08 #Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 #Javascript
vue.js的简单自动求和计算实例
Nov 08 #Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 #Javascript
Vue搭建后台系统需要注意的问题
Nov 08 #Javascript
vue视频播放暂停代码
Nov 08 #Javascript
You might like
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
python为tornado添加recaptcha验证码功能
2014/02/26 Python
python访问系统环境变量的方法
2015/04/29 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
django跳转页面传参的实现
2020/09/17 Python
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
先进事迹报告会感言
2014/01/24 职场文书
高中生期末评语
2014/01/28 职场文书
高三自我评价
2014/02/01 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
物业品质提升方案
2014/06/08 职场文书
代领毕业证委托书
2014/08/02 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书