eslint / prettier 檢查格式配置

eslint 和 prettier 區別

eslint（包括其他一些 lint 工具）的主要功能包含代碼格式的校驗，代碼質量的校驗。而 Prettier 只是代碼格式的校驗（並格式化代碼），不會對代碼質量進行校驗。代碼格式問題通常指的是：單行代碼長度、tab長度、空格、逗號表達式等問題。而代碼質量問題指的是：未使用變量、三等號、全局變量聲明等問題。

對 Prettier（或 Eslint）進行配置：

根目錄創建 .prettierrc.js / .eslintrc.js 文件，能夠寫入 YML、JSON 的配置格式，並且支持 .yaml/.yml/.json/.js 後綴；
在 package.json 中新建 prettier / eslintConfig 屬性。

一些規則的配置

'off': 表示關掉，
'wran': 表示發出警告
'error': 表示發出錯誤

/*對應的數字是 */
0：表示關掉
1：表示發出警告
2：表示發出錯誤

"always": 總是開啓
"never": 從不開啓

vue 實例

安裝

yarn add -D @vue/cli-plugin-eslint babel-eslint eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue

module.exports = {
  root: true,
  extends: ["eslint:recommended", "plugin:vue/essential", "plugin:prettier/recommended"],
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "babel-eslint",
    sourceType: "module",
    allowImportExportEverywhere: true
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  globals:{ // 全局變量
    "store":false,
    "Vue":true,
    "Vuex":true
  },
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": [ // 內部配置 prettier
      1,
      {
        semi: false, // 格式化不加分號
        printWidth: 200, // 一行的字符數，如果超過會進行換行，默認爲80
        singleQuote: false, // 字符串是否使用單引號，默認爲false，使用雙引號
        trailingComma: "none", // 是否使用尾逗號，有三個可選值"<none|es5|all>"
        bracketSpacing: true, // 對象大括號直接是否有空格，默認爲true，效果：{ foo: bar }
        jsxBracketSameLine: true // JSX 標籤閉合位置，默認false，換行閉合
      } // prettier 配置項
    ],
    semi: [1, "never"]
    // 公共 rules 配置
  }
};

react 實例

安裝

yarn add -D babel-eslint eslint eslint-config-prettier eslint-plugin-prettier eslint-config-react-app eslint-plugin-react-hooks eslint-plugin-react prettier

配置 autoFix

"fix": "eslint --fix --ext .js,.ts,.tsx --ignore-path .gitignore src/"

module.exports = {
  root: true,
  extends: ["react-app", "eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
  parserOptions: {
    parser: "babel-eslint",
    sourceType: "module",
    allowImportExportEverywhere: true
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  plugins: ["prettier", "react-hooks"],
  rules: {
    "prettier/prettier": [
      1,
      {
        semi: false, // 格式化不加分號
        printWidth: 200, // 一行的字符數，如果超過會進行換行，默認爲80
        singleQuote: false, // 字符串是否使用單引號，默認爲false，使用雙引號
        trailingComma: "none", // 是否使用尾逗號，有三個可選值"<none|es5|all>"
        bracketSpacing: true, // 對象大括號直接是否有空格，默認爲true，效果：{ foo: bar }
        jsxBracketSameLine: true, // JSX 標籤閉合位置，默認false，換行閉合
      }
    ],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/jsx-tag-spacing": 1, // 總是在自動關閉的標籤前加一個空格，正常情況下也不需要換行
    "jsx-quotes": 1,
    "react/jsx-closing-bracket-location": 1,  // 遵循JSX語法縮進/格式
    "react/jsx-boolean-value": 1, // 如果屬性值爲 true, 可以直接省略
    "react/no-string-refs": 1,  // 總是在Refs裏使用回調函數
    "react/self-closing-comp": 1, // 對於沒有子元素的標籤來說總是自己關閉標籤
    "react/sort-comp": 1,  // 按照具體規範的React.createClass 的生命週期函數書寫代碼
    "react/jsx-pascal-case": 1, // React模塊名使用帕斯卡命名，實例使用駱駝式命名
    "react/display-name": 1,
    semi: [2, "never"]
  }
};

公共 rules 配置

完整 .eslintrc.js 規則

  rules: {
    "no-useless-escape": 0, // 禁用不必要的轉義
    semi: [2, "never"], // 語句強制分號結尾
    quotes: [2, "double"], //建議使用單引號
    "no-inner-declarations": [0, "both"], //不建議在{}代碼塊內部聲明變量或函數
    "no-extra-boolean-cast": 0, // 多餘的感嘆號轉布爾型
    "no-extra-semi": 2, // 多餘的分號
    "no-extra-parens": 2, // 多餘的括號
    "no-empty": 0, // 空代碼塊
    "no-use-before-define": [2, "nofunc"], // 使用前未定義
    complexity: [2, 20], // 圈複雜度大於20 警告
    "space-before-blocks": [0, "always"], // 不以新行開始的塊{前面要有2空格
    "space-before-function-paren": [0, "always"], // 函數定義時括號前面有2空格
    "spaced-comment": 0, // 註釋風格 2空格什麼的
    "space-infix-ops": 2, // 中綴操作符周圍 有2空格
    "space-in-parens": [0, "never"], // 小括號裏面要不要有空格
    radix: 0, // parseInt必須指定第二個參數
    "operator-linebreak": [0, "before"], // 換行時運算符在行尾還是行首，可選值"<after|before|none>"
    // "one-var-declaration-per-line": 2, // 單行聲明
    "max-len": [0, 200, 2], // 字符串最大長度
    "key-spacing": [2, { beforeColon: false, afterColon: true }], // 對象字面量中冒號的前後空格
    indent: [0, 2], // 縮進風格
    "no-multiple-empty-lines": [1, { max: 2 }], // 空行最多不能超過2行
    "no-multi-str": 2, // 字符串不能用\換行
    "no-mixed-spaces-and-tabs": [2, false], // 禁止混用tab和空格
    "no-console": 1, // 禁止使用console
    "no-const-assign": 2, // 禁止修改const聲明的變量

    //常見錯誤
    "comma-dangle": [2, "never"], // 定義數組或對象最後多餘的逗號
    "no-debugger": 2, // debugger 調試代碼未刪除
    "no-constant-condition": 2, // 常量作爲條件
    "no-dupe-args": 2, // 參數重複
    "no-dupe-keys": 2, // 對象屬性重複
    "no-duplicate-case": 2, // case重複
    "no-empty-character-class": 2, // 正則無法匹配任何值
    "no-invalid-regexp": 2, // 無效的正則
    "no-func-assign": 2, // 函數被賦值
    "valid-typeof": 2, // 無效的類型判斷
    "no-unreachable": 2, // 不可能執行到的代碼
    "no-unexpected-multiline": 2, // 行尾缺少分號可能導致一些意外情況
    "no-sparse-arrays": 2, // 數組中多出逗號
    "no-shadow-restricted-names": 2, // 關鍵詞與命名衝突
    "no-undef": 0, // 變量未定義
    "no-unused-vars": 0, // 變量定義後未使用 jsx 處理不了……
    "no-cond-assign": 2, // 條件語句中禁止賦值操作
    "no-native-reassign": 2, // 禁止覆蓋原生對象

    //代碼風格優化
    "no-else-return": 0, // 在else代碼塊中return，else是多餘的
    "no-multi-spaces": 2, // 不允許多個空格
    "block-scoped-var": 0, // 變量定義後未使用
    "consistent-return": 0, // 函數返回值可能是不同類型
    "accessor-pairs": 2, // object gettertter方法需要成對出現
    "dot-location": [2, "property"], // 換行調用對象方法  點操作符應寫在行首
    "no-lone-blocks": 2, // 多餘的{}嵌套
    "no-labels": 2, // 無用的標記
    "no-extend-native": 2, // 禁止擴展原生對象
    "no-floating-decimal": 2, // 浮點型需要寫全 禁止.2 或 2.寫法
    "no-loop-func": 2, // 禁止在循環體中定義函數
    "no-new-func": 2, // 禁止new Function(...) 寫法
    "no-self-compare": 2, // 不允與自己比較作爲條件
    "no-sequences": 2, // 禁止可能導致結果不明確的逗號操作符
    "no-throw-literal": 2, // 禁止拋出一個直接量 應是Error對象
    "no-return-assign": [2, "always"], // 不允return時有賦值操作
    "no-redeclare": [0, { builtinGlobals: true }], // 不允許重複聲明
    "no-unused-expressions": [0, { allowShortCircuit: true, allowTernary: true }], // 未使用的表達式
    "no-useless-call": 2, // 無意義的函數call或apply
    "no-useless-concat": 2, // 無意義的string concat
    "no-void": 2, // 禁用void
    "no-with": 2, // 禁用with
    "no-warning-comments": [2, { terms: ["fixme", "any other term"], location: "anywhere" }], // 標記未寫註釋
    curly: [2, "all"] // if、else、while、for代碼塊用{}包圍
  }

完整 .prettierrc.js 規則

也可單獨在 .prettierrc.js 內配置

// .eslintrc.js
...
rules: {
  "prettier/prettier": 2
  ...
}
// .prettierrc.js
module.exports = {
  semi: false, // 行位是否使用分號，默認爲true
  eslintIntegration: true, // 開啓 eslint 支持
  printWidth: 100, // 一行的字符數，如果超過會進行換行，默認爲80
  tabWidth: 2, // 一個tab代表幾個空格數，默認爲80
  useTabs: false, // 是否使用tab進行縮進，默認爲false，表示用空格進行縮減
  singleQuote: false, // 字符串是否使用單引號，默認爲false，使用雙引號
  trailingComma: "none", // 是否使用尾逗號，有三個可選值"<none|es5|all>"
  bracketSpacing: true, // 對象大括號直接是否有空格，默認爲true，效果：{ foo: bar }
  jsxBracketSameLine: false, // JSX 標籤閉合位置，默認false，換行閉合
  arrowParens: "avoid", // 箭頭函數參數括號，默認avoid，能省略就省略，可選值"<avoid|always>"
  parser: "babel" // 代碼的解析引擎
};

husky / lint-staged 強制校驗

安裝

yarn add -D husky lint-staged

使用

  // package.json
  
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,json,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  },

在運行 git commit 時候，自動會先去運行 vue-cli-service lint 格式化代碼，再運行 git add 添加代碼。這兩步都通過後纔會提交代碼。如果任何一步失敗，則會停止提交。

eslint / prettier 檢查格式配置、husky / lint-staged 強制校驗

eslint / prettier 檢查格式配置

eslint 和 prettier 區別

對 Prettier（或 Eslint）進行配置：

一些規則的配置

vue 實例

react 實例

公共 rules 配置

完整 .eslintrc.js 規則

完整 .prettierrc.js 規則

husky / lint-staged 強制校驗

SQL優化-20231016

vue-router——message: "Navigating to current location (XXX) is not allowed"

百度地圖點聚合優化重寫

js——Fetch

xcode 上架 ios

mac 問題

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

eslint / prettier 檢查格式配置、husky / lint-staged 強制校驗

eslint / prettier 檢查格式配置

eslint 和 prettier 區別

對 Prettier（或 Eslint） 進行配置：

一些規則的配置

vue 實例

react 實例

公共 rules 配置

husky / lint-staged 強制校驗

對 Prettier（或 Eslint）進行配置：