LionGroup-Config

eslint 引用方法

1. 安裝 vscode 插件

ESLint Vscode Extension

2. 安裝 npm 套件

npm i -D eslint-config-alloy eslint-plugin-react eslint-plugin-react-hooks

3. 建立設定檔

在根目錄下的建立一個 .eslintrc(.json) 檔案 並加入以下擴充

module.expoorts = {
    extends: ["benson"],
    rules: {
        /* 你的自訂規則 */
    },
};

TypeScript 規則

• Enum, Type, Interface 須以 E_ , T_ , I_ 開頭，
• Enum 只接受大寫和 _

  正確的寫法

enum E_NUMBERS {
    One,
    Two,
}

type T_Names = {
    first: string;
};

interface I_Eamil {
    first: string;
}

  錯誤的寫法

// 名稱含小寫
enum E_Numbers {
    One,
    Two,
}

// 沒有以 T_ 開頭
type Names = {
    first: string;
};

// 沒有以 I_ 開頭
interface Email {
    first: string;
}

Prettier

1. 安裝 vscode 插件

Prettier Vscode Extension

2. 建立設定檔

.prettierrc.js

module.exports = {
    ...require("eslint-config-benson/prettier-config"),
    /**
     * 以下為你的自訂規則
     */
    semi: false,
};

Stylelint

1. 安裝 vscode 插件

Stylelint Vscode Extension

2. 下載 npm 套件

npm i -D stylelint

3. 建立設定檔

.stylelintrc(.json)

{
    "extends": "eslint-config-benson/stylelint.config"
}

搭配 Styled-Components

請下載

npm i -D stylelint-processor-styled-components

• stylelint-processor-styled-components：將樣式從 styled-components 抽出

並在 .stylelintrc.json 加入

{
    "processors": ["stylelint-processor-styled-components"],
    "extends": ["eslint-config-benson/stylelint.config"],
    "rules": [
        /* 你的自訂規則 */
    ]
}

參考資源

eslint

• https://medium.com/onedegree-tech-blog/%E5%BB%BA%E7%AB%8B%E5%85%AC%E5%8F%B8%E5%85%A7%E9%83%A8%E4%BD%BF%E7%94%A8%E7%9A%84-eslint-config-package-4b76c089848
• https://github.com/AlloyTeam/eslint-config-alloy/blob/master/README.zh-CN.md
• https://github.com/yannickcr/eslint-plugin-react

prettier

• https://prettier.io/docs/en/configuration.html

stylelint

• https://stylelint.io/user-guide/configure/#plugins
• https://styled-components.com/docs/tooling