快捷導(dǎo)航

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

更新時間：2019年01月13日 09:51:06 作者：棲遲于一丘

這篇文章主要給大家介紹了關(guān)于vscode下vue項目中eslint的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

在vscode的vue項目中，關(guān)于代碼檢查和格式化，遇到各種各樣的問題，比如：

不清楚安裝的拓展的功能，導(dǎo)致安裝了重復(fù)功能的拓展
右鍵格式化文檔的時候，不是按eslint的規(guī)則來格式化，導(dǎo)致需要我再次手動調(diào)整
保存時不能自動修復(fù)代碼

以下通過自己的實踐，進(jìn)行了相應(yīng)配置，目前可以實現(xiàn)：

僅安裝2個推薦的拓展
右鍵格式化文檔按照eslint規(guī)則，不會產(chǎn)生錯誤
保存時自動修復(fù)代碼

vscode 拓展安裝

eslint 拓展

該拓展本身不帶任何插件，當(dāng)前項目要使用該拓展，需要安裝相應(yīng)的npm包（全局安裝或當(dāng)前項目安裝）

對于 vue 項目，通常在 vscode 中做如下設(shè)置:

 //保存時自動修復(fù)代碼
 "eslint.autoFixOnSave": true,
 "eslint.options": {
  // 應(yīng)檢查代碼的文件擴展名數(shù)組
  "extensions": [
   ".js",
   ".vue"
  ]
 },
 // 配置要驗證的語言標(biāo)識和自動修復(fù)選項，比前面兩個配置的結(jié)合更為細(xì)粒度話?？梢詢H配置下面代碼
 "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 僅用于快速啟動，對于規(guī)則配置需要用eslint.validate

Linting 不可配置，且自帶了一個固定版本的eslint-plugin-vue，一般我們不用。而是采用以下配置：

vscode中設(shè)置"vetur.validation.template": false

安裝ESlint拓展，錯誤處理將走eslint

項目中安裝npm i -D eslint eslint-plugin-vue插件

在.eslintrc.*設(shè)置eslint規(guī)則,后面會介紹eslintrc相關(guān)配置

Formatting 即右鍵的Format Document功能，不支持格式化選中內(nèi)容。

可以在設(shè)置中配置vetur.format.defaultFormatter \ 如：默認(rèn)"vetur.format.defaultFormatter.html": "prettyhtml",也可將值設(shè)為 none 就不會格式化該類文件了 \ 這個默認(rèn)設(shè)置非常難用，會將vue文件變得很亂，比如默認(rèn)加分號，屬性按列展開；我們在設(shè)置中進(jìn)行如下配置即可實現(xiàn)格式化vue文件時按eslint的規(guī)則來

"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 屬性列太長才折行,默認(rèn)的force-expand-multiline不美觀
"wrap_attributes": "auto"
},
"prettier": {
//去掉代碼結(jié)尾分號
"semi": false,
//使用eslint的代碼格式進(jìn)行校驗
"eslintIntegration": true,
//采用單引號
"singleQuote": true
}
},
//格式化.vue中html，js
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
//讓函數(shù)(名)和后面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,

IntelliSense 智能感知vue文件結(jié)構(gòu),比如<template>中提供了html標(biāo)簽和屬性的感知，當(dāng)編輯<template>時如同編輯html文件一樣，讓其他插件可以如html支持一樣進(jìn)行支持<template>

Debugging 調(diào)試功能

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

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

但只要配置合理，全文格式化未嘗不可

eslintrc 配置

安裝完上文兩個拓展和進(jìn)行相應(yīng)配置后，還需要對.eslintrc.js 進(jìn)行配置。文件不存在或配置不當(dāng)，編碼時不會進(jìn)行錯誤提示

若使用@vue/cli 初始化項目并選擇支持eslint，則默認(rèn)生成時就存在了。

否則需要手動生成：

詳見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
 }
}

當(dāng)前配置（主流）：extends配置vue校驗規(guī)則，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: [
 // 按從上往下的規(guī)則匹配
 //推薦校驗
 "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 的規(guī)則是force-expand-multiline

即按上述配置，格式化文檔時，屬性會變成一列（auto），但保存時的eslint 的autoFix會按 force-expand-multiline 多行展開。

覺得麻煩的，可以配置為plugin:vue/essential

配置分享

settings.json

// 將設(shè)置放入此文件中以覆蓋默認(rèn)設(shè)置
{
 "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": {
   // 屬性列太長才折行,默認(rèn)的force-expand-multiline不美觀
   "wrap_attributes": "auto"
  },
  "prettier": {
   //去掉代碼結(jié)尾分號
   "semi": false,
   //使用eslint的代碼格式進(jìn)行校驗
   "eslintIntegration": true,
   //采用單引號
   "singleQuote": true
  }
 },
 //格式化.vue中html，js
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 "vetur.format.defaultFormatter.js": "vscode-typescript",
 //讓函數(shù)(名)和后面的括號之間加個空格
 "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/

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: