vscode下vue项目中eslint的使用方法


Posted in Javascript onJanuary 13, 2019

前言

在vscode的vue项目中,关于代码检查和格式化,遇到各种各样的问题,比如:

  • 不清楚安装的拓展的功能,导致安装了重复功能的拓展
  • 右键格式化文档的时候,不是按eslint的规则来格式化,导致需要我再次手动调整
  • 保存时不能自动修复代码

以下通过自己的实践,进行了相应配置,目前可以实现:

  • 仅安装2个推荐的拓展
  • 右键格式化文档按照eslint规则,不会产生错误
  • 保存时自动修复代码

vscode 拓展安装

eslint 拓展

该拓展本身不带任何插件,当前项目要使用该拓展,需要安装相应的npm包(全局安装或当前项目安装)

对于 vue 项目,通常在 vscode 中做如下设置:

//保存时自动修复代码
 "eslint.autoFixOnSave": true,
 "eslint.options": {
  // 应检查代码的文件扩展名数组
  "extensions": [
   ".js",
   ".vue"
  ]
 },
 // 配置要验证的语言标识和自动修复选项,比前面两个配置的结合更为细粒度话。可以仅配置下面代码
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  "html",
  {
   "language": "vue",
   "autoFix": true
  }
 ],

vetur 拓展

vue 工具,主要有以下功能

Syntax-highlighting 语法高亮

Snippet 快速定义脚手架代码片段,如:写script后会跳出export default{xxx},style 后面会带lang、scope等

Emmet 仿css选择器快速生成 html/css 代码

Linting / Error Checking vetur的 Linting 仅用于快速启动,对于规则配置需要用eslint.validate

Linting 不可配置,且自带了一个固定版本的eslint-plugin-vue,一般我们不用。而是采用以下配置:

  • vscode中设置"vetur.validation.template": false
  • 安装ESlint拓展,错误处理将走eslint
  • 项目中安装npm i -D eslint eslint-plugin-vue插件
  • 在.eslintrc.*设置eslint规则,后面会介绍eslintrc相关配置

Formatting 即右键的Format Document功能,不支持格式化选中内容。

可以在设置中配置vetur.format.defaultFormatter \ 如:默认"vetur.format.defaultFormatter.html": "prettyhtml",也可将值设为 none 就不会格式化该类文件了 \ 这个默认设置非常难用,会将vue文件变得很乱,比如默认加分号,属性按列展开;我们在设置中进行如下配置即可实现格式化vue文件时按eslint的规则来

"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 属性列太长才折行,默认的force-expand-multiline不美观
"wrap_attributes": "auto"
},
"prettier": {
//去掉代码结尾分号
"semi": false,
//使用eslint的代码格式进行校验
"eslintIntegration": true,
//采用单引号
"singleQuote": true
}
},
//格式化.vue中html,js
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
//让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,

IntelliSense 智能感知vue文件结构,比如<template>中提供了html标签和属性的感知,当编辑<template>时如同编辑html文件一样,让其他插件可以如html支持一样进行支持<template>

Debugging 调试功能

Framework Support for Element UI and Onsen UI UI框架支持

如果想使用Format Selection功能,需要再下载prettier-Code formatter拓展。

但只要配置合理,全文格式化未尝不可

eslintrc 配置

安装完上文两个拓展和进行相应配置后,还需要 对.eslintrc.js 进行配置。文件不存在或配置不当,编码时不会进行错误提示

若使用@vue/cli 初始化项目并选择支持eslint,则默认生成时就存在了。

否则需要手动生成:

详见Installation

 .eslintrc.js

早期的一个配置

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

module.exports = {
 root: true,
 parser: 'babel-eslint',
 parserOptions: {
 sourceType: 'module'
 },
 env: {
 browser: true,
 },
 // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
 extends: 'standard',
 // required to lint *.vue files
 plugins: [
 'html'
 ],
 // add your custom rules here
 'rules': {
 // allow paren-less arrow functions
 'arrow-parens': 0,
 // allow async-await
 'generator-star-spacing': 0,
 // allow debugger during development
 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
 }
}

当前配置(主流):extends配置vue校验规则,parser移至parserOptions下,plugins中配置为vue

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

module.exports = {
 root: true,

 // parser: 'babel-eslint',
 parserOptions: {
 sourceType: 'module',
 parser: 'babel-eslint',
 },
 env: {
 browser: true,
 },
 // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
 extends: [
 // 按从上往下的规则匹配
 //推荐校验
 "plugin:vue/recommended",
 //基本校验
 //"plugin:vue/essential",
 "standard"
 ],
 // required to lint *.vue files
 plugins: [
 'vue'
 ],
 // add your custom rules here
 'rules': {
 // allow paren-less arrow functions
 'arrow-parens': 0,
 // allow async-await
 'generator-star-spacing': 0,
 // allow debugger during development
 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
 }
}

plugin:vue/recommended 下 wrap_attributes 的规则是force-expand-multiline

即按上述配置,格式化文档时,属性会变成一列(auto),但保存时的eslint 的autoFix会按 force-expand-multiline 多行展开。

觉得麻烦的,可以配置为plugin:vue/essential

配置分享

settings.json

// 将设置放入此文件中以覆盖默认设置
{
 "editor.fontSize": 12,
 "editor.tabSize": 2,
 "files.associations": {
  "*.vue": "vue"
 },
 "eslint.autoFixOnSave": true,
 "eslint.options": {
  "extensions": [
   ".js",
   ".vue"
  ]
 },
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  {
   "language": "html",
   "autoFix": true
  },
  {
   "language": "vue",
   "autoFix": true
  }
 ],
 "vetur.validation.template": false,
 "vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
   // 属性列太长才折行,默认的force-expand-multiline不美观
   "wrap_attributes": "auto"
  },
  "prettier": {
   //去掉代码结尾分号
   "semi": false,
   //使用eslint的代码格式进行校验
   "eslintIntegration": true,
   //采用单引号
   "singleQuote": true
  }
 },
 //格式化.vue中html,js
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 "vetur.format.defaultFormatter.js": "vscode-typescript",
 //让函数(名)和后面的括号之间加个空格
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
 "search.exclude": {
  "**/Node_modules": true,
  "**/bower_components": true,
  "**/dist": true
 },
 "git.confirmSync": false,
 "window.zoomLevel": 0,
 "editor.renderWhitespace": "boundary",
 "editor.cursorBlinking": "smooth",
 "editor.minimap.enabled": true,
 "editor.minimap.renderCharacters": false,
 "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
 "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
 "editor.codeLens": true,
 "editor.snippetSuggestions": "top",
 "workbench.colorTheme": "Solarized Light",
 "extensions.ignoreRecommendations": false
}

参考 :

eslint-plugin-vue: https://eslint.vuejs.org/user-guide/

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
jQuery实现的中英文切换功能示例
Jan 11 #jQuery
JavaScript寄生组合式继承原理与用法分析
Jan 11 #Javascript
JavaScript常见继承模式实例小结
Jan 11 #Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 #Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 #Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 #Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 #Javascript
You might like
php 异常处理实现代码
2009/03/10 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
港湾网络笔试题
2014/04/19 面试题
给实习单位的感谢信
2014/02/01 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
演讲开场白和结束语
2015/05/29 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
Python实现简繁体转换
2021/06/07 Python