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 相关文章推荐
js css样式操作代码(批量操作)
Oct 09 Javascript
js null,undefined,字符串小结
Aug 21 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
详解JS预解析原理
Jun 16 Javascript
JavaScript实现登录窗体
Jun 22 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
php实现的二分查找算法示例
2017/06/20 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
网页中CDATA标记的说明
2010/09/12 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python定时器使用示例分享
2014/02/16 Python
简单使用Python自动生成文章
2014/12/25 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
Python错误处理操作示例
2018/07/18 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
python实现图片转字符画
2021/02/19 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
求职自荐书范文
2013/12/04 职场文书
成品仓管员岗位职责
2013/12/11 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
2015年保管员工作总结
2015/04/30 职场文书
2015入党自传格式范文
2015/06/26 职场文书
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers