vscode團隊代碼風格統一

時間 2020-11-30

標籤 javascript css html 前端 vue java react webpack git es6 欄目 JavaScript 简体版

原文原文鏈接

前言

公司團隊目前前端開發人員快速增加，爲了保證每一個成員代碼編寫的統一規範，先編寫初版本配置。持續修改中javascript

想法

使用vscode + vetur + eslint + prettier 實現團隊代碼風格統一
eslint 主要負責 vue/js 的格式化
prettier 主要負責 html/css/less/scss… 的格式化css

使用

IDE: vs code

ESLint // ide lint 報錯/warning 要靠它
Prettier - Code formatter // 格式化 html/css/less/scss etc…
Vetur // 這裏只用來語法提示，代碼格式化交給 eslint（npm）vue

npm:

eslint
eslint-config-airbnb-base
eslint-config-prettier
eslint-plugin-import
eslint-plugin-vue
eslint-plugin-prettier
prettierjava

關鍵配置文件

.vscode/setting.json // ESLint（ide 插件），vetur（ide 插件）配置在這裏
.editorconfig // 字符集配置，縮進等配置
.eslintrc.js // eslint（npm）配置，ide eroor/warning 信息在這裏配置
.eslintignore // eslint 排除文件，如一些庫文件
.prettierrc.js // prettier 配置，如逗號分號規則
.prettierignore //prettier 排除文件react

配置

.editorconfig

root = true # 代表是最頂層的配置文件，發現設爲true時，纔會中止查找.editorconfig文件。

[*]
charset = utf-8 # 編碼格式，支持latin一、utf-八、utf-8-bom、utf-16be和utf-16le，不建議使用uft-8-bom。
indent_style = space # tab爲hard-tabs，space爲soft-tabs。
indent_size = 2 # 設置整數表示規定每級縮進的列數和soft-tabs的寬度（譯註：空格數）。若是設定爲tab，則會使用tab_width的值（若是已指定）。
end_of_line = lf # 定義換行符，支持lf、cr和crlf。
insert_final_newline = # 設爲true代表使文件以一個空白行結尾，false反之。
trim_trailing_whitespace = true # 設爲true表示會除去換行行首的任意空白字符，false反之。

[*.md]
insert_final_newline = false # 設爲true代表使文件以一個空白行結尾，false反之。
trim_trailing_whitespace = false # 設爲true表示會除去換行行首的任意空白字符，false反之。

.eslintrc.js

/**
 *
 * 規則說明見 https://cn.eslint.org/docs/rules/
 * eslint-plugin-import 規則見 https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/default.md
 * eslint-plugin-vue 規則見 https://github.com/vuejs/eslint-plugin-vue
 *
 * "off" 或 0 - 關閉規則
 * "warn" 或 1 - 開啓規則，使用警告級別的錯誤：warn (不會致使程序退出)
 * "error" 或 2 - 開啓規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)
 *
 */

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    "airbnb-base", // airbnb lint規範
    "plugin:vue/essential", // eslint-plugin-vue
    "plugin:prettier/recommended" // eslint-config-prettier
  ],
  // settings: {
  //   'import/resolver': {
  //     webpack: {
  //       config: 'build/webpack.base.conf.js',
  //     },
  //   },
  // },
  // plugins: ['vue'],
  rules: {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "trailingComma": "none",
        "bracketSpacing": true,
        "jsxBracketSameLine": true,
        "endOfLine": "auto"
      }
    ],
    "no-undef": 2, // 禁用未聲明的變量，除非它們在 /*global */ 註釋中被提到. e.g. /* global Stomp SockJS */ in .vue file's <scrpit>
    "no-extend-native": 2, // 禁止擴展原生類型
    "no-return-assign": 2, // 禁止在 return 語句中使用賦值語句
    "import/order": 0, // Enforce a convention in module import order
    "import/no-extraneous-dependencies": 0, // 禁止導入未在package.json的依賴項，devDependencies，optionalDependencies或peerDependencies中聲明的外部模塊。將使用最接近的父package.json。
    "import/no-dynamic-require": 1, // CommonJS的require方法用於從不一樣文件導入模塊。與ES6導入語法不一樣，能夠爲其提供將在運行時解析的表達式。雖然這有時是必要且有用的，但在大多數狀況下並不是如此。使用表達式（例如，鏈接路徑和變量）做爲參數使得工具更難以進行靜態代碼分析，或者在代碼庫中找到使用模塊的位置。
    "import/extensions": 0, // 某些文件解析算法容許您在導入源路徑中省略文件擴展名。例如，節點解析器能夠將./foo/bar解析爲絕對路徑/User/someone/foo/bar.js，由於默認狀況下會自動解析.js擴展名。根據解析程序，您能夠配置更多擴展程序以自動解決。
    "import/no-unresolved": 0, // 確保導入的模塊能夠解析爲本地文件系統上的模塊，如標準Node require.resolve行爲所定義。
    "import/prefer-default-export": 1, // 當模塊中只有一個導出時，更喜歡使用默認導出而不是命名導出。
    "vue/no-async-in-computed-properties": 1, // 計算屬性應該是同步的。其中的異步操做可能沒法按預期工做，並可能致使意外行爲，這就是您應該避免它們的緣由。若是您須要異步計算屬性，可能須要考慮使用其餘插件[vue-async-computed]
    "vue/no-side-effects-in-computed-properties": 1, // 在計算屬性中引入反作用被認爲是一種很是糟糕的作法。它使代碼沒法預測且難以理解。
    "vue/no-reserved-keys": 1, // 此規則阻止使用保留名稱以免衝突和意外行爲。
    "vue/require-v-for-key": 2, // 當v-for寫在自定義組件上時，它須要同時使用v-bind：key。在其餘元素上，v-bind：key也最好寫。
    "vue/require-valid-default-prop": 1, // 此規則檢查每一個prop的默認值是否對給定類型有效。當使用函數未返回類型Array或Object的默認值時，它應報告錯誤。
    "no-unused-vars": 1, // 禁止出現未使用過的變量
    "generator-star-spacing": 0, // 強制 generator 函數中 * 號周圍使用一致的空格
    "no-plusplus": 0, // 禁用一元操做符 ++ 和 --
    "func-names": 0, // 要求或禁止使用命名的 function 表達式
    "no-console": 0, // no-console
    radix: 0, // 強制在parseInt()使用基數參數
    "no-control-regex": 0, // 禁止在正則表達式中使用控制字符
    "no-continue": 0, // 禁用 continue 語句
    "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
    "no-param-reassign": 1, // 禁止對 function 的參數進行從新賦值
    "no-underscore-dangle": 1, // 禁止標識符中有懸空下劃線"_"
    "global-require": 1, // 要求 require() 出如今頂層模塊做用域中
    "no-var": 1, // 要求使用 let 或 const 而不是 var
    "vars-on-top": 1, // 要求全部的 var 聲明出如今它們所在的做用域頂部
    "prefer-destructuring": 1, // 優先使用數組和對象解構
    "no-useless-concat": 1, // 禁止沒必要要的字符串字面量或模板字面量的鏈接
    "no-shadow": 1, // 禁止變量聲明與外層做用域的變量同名
    "guard-for-in": 1, // 要求 for-in 循環中有一個 if 語句,旨在防止使用for in循環而不過濾循環中的結果時可能出現的意外行爲。
    "no-restricted-syntax": 1, // 禁用特定的語法
    "global-require": 1, // 要求 require() 出如今頂層模塊做用域中
    "consistent-return": 1, // 要求 return 語句要麼老是指定返回的值，要麼不指定
    eqeqeq: 1, // 要求使用 === 和 !==
    "no-unused-expressions": 1, // 禁止出現未使用過的表達式
    camelcase: 1, // 強制使用駱駝拼寫法命名約定
    "block-scoped-var": 1, // 強制把變量的使用限制在其定義的做用域範圍內,旨在減小綁定上下文以外的變量的使用，並從其餘語言模擬傳統的塊範圍。這是爲了幫助語言新手避免變量提高的難題。
    "no-redeclare": 1, // 禁止屢次聲明同一變量
    "prefer-arrow-callback": 1, // 要求回調函數使用箭頭函數
    "array-callback-return": 1, // 強制數組方法的回調函數中有 return 語句,Array有幾種過濾，映射和摺疊的方法。若是咱們忘記return在這些回調中寫入語句，那多是一個錯誤。
    "default-case": 1, // 要求 switch 語句中有 default 分支
    "no-loop-func": 1, // 禁止在循環中出現 function 聲明和表達式
    "no-fallthrough": 1, // 禁止 case 語句落空
    "no-multi-assign": 1, // 禁止連續賦值
    "no-lonely-if": 1, // 禁止 if 做爲惟一的語句出如今 else 語句中.若是一個if陳述是該else塊中惟一的陳述，那麼使用一個else if表格一般會更清晰。
    "no-irregular-whitespace": 1, // 禁止在字符串和註釋以外不規則的空白
    "prefer-const": 1, // 要求使用 const 聲明那些聲明後再也不被修改的變量.若是一個變量從不從新分配，使用const聲明更好。const 聲明告訴讀者，「這個變量永遠不會被從新分配，」減小認知負荷並提升可維護性。
    "no-use-before-define": 1, // 禁止在變量定義以前使用它們
    "no-useless-escape": 1, // 禁用沒必要要的轉義字符
    "no-array-constructor": 1, // 禁用 Array 構造函數,因爲單參數的缺陷以及Array全局可能被從新定義，因此一般不鼓勵使用構造函數來構造新Array數組，而是傾向於使用數組文字符號。例外狀況是Array構造函數用於經過給構造函數一個數字參數有意建立指定大小的稀疏數組。
    "object-shorthand": 1, // 要求或禁止對象字面量中方法和屬性使用簡寫語法
    "no-prototype-builtins": 1, // 禁止直接調用 Object.prototypes 的內置屬性.當假定對象將具備屬性時，這可能致使錯誤Object.prototype。此規則可防止Object.prototype直接從對象調用方法。
    "no-nested-ternary": 1, // 禁用嵌套的三元表達式.嵌套三元表達式會使代碼更難理解。
    "no-new-wrappers": 1, // 禁止對 String，Number 和 Boolean 使用 new 操做符.沒有任何理由將這些基本包裝用做構造函數
    "prefer-promise-reject-errors": 1, // 要求使用 Error 對象做爲 Promise 拒絕的緣由
    "no-labels": 1 // 禁用標籤語句
  }
};

.prettierrc

module.exports = {
    printWidth: 80, //一行的字符數，若是超過會進行換行，默認爲80
    tabWidth: 2, //一個tab表明幾個空格數，默認爲80
    useTabs: false, //是否使用tab進行縮進，默認爲false，表示用空格進行縮減
    singleQuote: true, //字符串是否使用單引號，默認爲false，使用雙引號
    semi: true, //行位是否使用分號，默認爲true
    trailingComma: "es5", //是否使用尾逗號，有三個可選值"<none|es5|all>"
    bracketSpacing: true //對象大括號直接是否有空格，默認爲true，效果：{ foo: bar }
    // parser: 'babylon', //代碼的解析引擎，默認爲babylon，與babel相同。
  };

.vscode/setting.json

{
    // 使用2個空格做爲tab,並將對齊基準線設置爲2個字符test
    "editor.tabSize": 2,
    // 保存文件時自動格式化,主要針對html/css/less/scss等eslint未覆蓋的文件格式
    // "editor.formatOnSave": true,
    // 保存文件時按照eslint配置自動處理vue/js/jsx/ts/json文件格式
    // "eslint.autoFixOnSave": true,
    // 打開對vue的lint,並自動fix
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
        "language": "vue",
        "autoFix": true
      }
    ],
    // 對於.vue文件,關閉prettier,交給eslint fix
    "vetur.format.defaultFormatter.css": "none",
    "vetur.format.defaultFormatter.html": "none",
    "vetur.format.defaultFormatter.js": "none",
    "vetur.format.defaultFormatter.less": "none",
    "vetur.format.defaultFormatter.postcss": "none",
    "vetur.format.defaultFormatter.scss": "none",
    "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
    "vetur.format.defaultFormatter.ts": "none",
  
    /* stylus 配置 start */
    // 是否插入冒號
    "stylusSupremacy.insertColons": false,
    // 是否插入分號
    "stylusSupremacy.insertSemicolons": false,
    // 是否插入大括號
    "stylusSupremacy.insertBraces": false,
    // import以後是否換行
    "stylusSupremacy.insertNewLineAroundImports": false,
    // 兩個選擇器中是否換行
    "stylusSupremacy.insertNewLineAroundBlocks": false,
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
    /* stylus 配置 end */
  }