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

来源：动视网责编：小采时间：2020-11-27 22:01:59

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

vscode下vue项目中eslint的使用方法:前言在vscode的vue项目中，关于代码检查和格式化，遇到各种各样的问题，比如：不清楚安装的拓展的功能，导致安装了重复功能的拓展右键格式化文档的时候，不是按eslint的规则来格式化，导致需要我再次手动调整保存时不能自动修复代码以下通过自己的

推荐度：

点击下载本文 文档为doc格式

导读vscode下vue项目中eslint的使用方法:前言在vscode的vue项目中，关于代码检查和格式化，遇到各种各样的问题，比如：不清楚安装的拓展的功能，导致安装了重复功能的拓展右键格式化文档的时候，不是按eslint的规则来格式化，导致需要我再次手动调整保存时不能自动修复代码以下通过自己的

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/

总结

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

推荐度：

点击下载本文 文档为doc格式

标签：使用 VUE 教程

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐