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 相关文章推荐
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
js的touch事件的实际引用
Oct 13 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
js闭包用法实例详解
Dec 13 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
常用的javascript function代码
2008/05/23 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
前台文员职责范本
2014/03/07 职场文书
学习经验交流会主持词
2014/04/01 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js