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

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

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

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

需安裝插件

主要是這兩個插件：

ESLint
Prettier - Code formatter

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

vscode中setting.json中配置

{
 // vscode默認啟用了根據(jù)文件類型自動設置tabsize的選項
 "editor.detectIndentation": false,
 // 重新設定tabsize
 "editor.tabSize": 2,
 // #每次保存的時候自動格式化 
 "editor.formatOnSave": true,
 // #每次保存的時候將代碼按eslint格式進行修復
 "eslint.autoFixOnSave": true,
 // 添加 vue 支持
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  {
   "language": "vue",
   "autoFix": true
  }
 ],
 // #讓prettier使用eslint的代碼格式進行校驗 
 "prettier.eslintIntegration": true,
 // #去掉代碼結尾的分號 
 "prettier.semi": false,
 // #使用帶引號替代雙引號 
 "prettier.singleQuote": true,
 // #讓函數(shù)(名)和后面的括號之間加個空格
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
 // #這個按用戶自身習慣選擇 
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 // #讓vue中的js按編輯器自帶的ts格式進行格式化 
 "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, // 是否插入冒號
 "stylusSupremacy.insertSemicolons": false, // 是否插入分好
 "stylusSupremacy.insertBraces": false, // 是否插入大括號
 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
 "stylusSupremacy.insertNewLineAroundBlocks": false,
 "window.zoomLevel": 0 // 兩個選擇器中是否換行
}

vue項目中.eslintrc.js文件常用個性化配置

// 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', // 未使用變量報錯
  'no-unreachable': 'off' // 不能執(zhí)行的代碼檢測
   //此處一下還可以根據(jù)個人習慣設置更多個性化內容
 }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: