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 相关文章推荐
validator验证控件使用代码
Nov 23 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
javascript  删除select中的所有option的实例
Sep 17 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
JS继承定义与使用方法简单示例
Feb 19 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
一些常用的php函数
2006/12/06 PHP
PHP 表单提交给自己
2008/07/24 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
最实用的JS数组函数整理
2017/12/05 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
网络方面基础面试题
2012/11/16 面试题
和谐家庭演讲稿
2014/05/24 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
2014年秘书工作总结
2014/11/25 职场文书
单位提档介绍信
2015/10/22 职场文书
python中__slots__节约内存的具体做法
2021/07/04 Python
nginx安装以及配置的详细过程记录
2021/09/15 Servers
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL
基于Python实现西西成语接龙小助手
2022/08/05 Golang