快捷導(dǎo)航

詳解Vscode中使用Eslint終極配置大全

更新時(shí)間：2019年11月08日 09:55:49 作者：如煙灬

這篇文章主要介紹了詳解Vscode中使用Eslint終極配置大全，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

在 vue項(xiàng)目中使用vscode編輯時(shí)，使用了如下這套配置，保存時(shí)就會(huì)根據(jù)既定vue項(xiàng)目中.eslintrc.js文件設(shè)置的既定規(guī)則自動(dòng)校驗(yàn)并依據(jù)規(guī)則修復(fù)代碼。

需安裝插件

主要是這兩個(gè)插件：

ESLint
Prettier - Code formatter

個(gè)人現(xiàn)用vscode插件截圖.png

vscode中setting.json中配置

{
 // vscode默認(rèn)啟用了根據(jù)文件類型自動(dòng)設(shè)置tabsize的選項(xiàng)
 "editor.detectIndentation": false,
 // 重新設(shè)定tabsize
 "editor.tabSize": 2,
 // #每次保存的時(shí)候自動(dòng)格式化 
 "editor.formatOnSave": true,
 // #每次保存的時(shí)候?qū)⒋a按eslint格式進(jìn)行修復(fù)
 "eslint.autoFixOnSave": true,
 // 添加 vue 支持
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  {
   "language": "vue",
   "autoFix": true
  }
 ],
 // #讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn) 
 "prettier.eslintIntegration": true,
 // #去掉代碼結(jié)尾的分號(hào) 
 "prettier.semi": false,
 // #使用帶引號(hào)替代雙引號(hào) 
 "prettier.singleQuote": true,
 // #讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
 // #這個(gè)按用戶自身習(xí)慣選擇 
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 // #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化 
 "vetur.format.defaultFormatter.js": "vscode-typescript",
 "vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
   "wrap_attributes": "force-aligned"
   // #vue組件中html代碼格式化樣式
  }
 },
 // 格式化stylus, 需安裝Manta's Stylus Supremacy插件
 "stylusSupremacy.insertColons": false, // 是否插入冒號(hào)
 "stylusSupremacy.insertSemicolons": false, // 是否插入分好
 "stylusSupremacy.insertBraces": false, // 是否插入大括號(hào)
 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
 "stylusSupremacy.insertNewLineAroundBlocks": false,
 "window.zoomLevel": 0 // 兩個(gè)選擇器中是否換行
}

vue項(xiàng)目中.eslintrc.js文件常用個(gè)性化配置

// https://eslint.org/docs/user-guide/configuring

module.exports = {
 root: false,
 parserOptions: {
  parser: 'babel-eslint'
 },
 env: {
  browser: true
 },
 extends: [
  // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
  // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
  'plugin:vue/essential',
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  'standard'
 ],
 // required to lint *.vue files
 plugins: ['vue'],
 // add your custom rules here
 rules: {
  // allow async-await
  'generator-star-spacing': 'off',
  // allow debugger during development
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  eqeqeq: 'off', // 不能始用==
  'no-unused-vars': 'off', // 消除未使用的變量
  'no-undef': 'off', // 未使用變量報(bào)錯(cuò)
  'no-unreachable': 'off' // 不能執(zhí)行的代碼檢測
   //此處一下還可以根據(jù)個(gè)人習(xí)慣設(shè)置更多個(gè)性化內(nèi)容
 }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: