使用 ESlint+stylelint+prettier 對前端項目代碼進行規范

說明：該規范主要針對的是使用的是 react+typescript+tsx 框架的代碼進行相關規范

　　目錄

1. 項目初始化
2. 添加eslint相關配置及規范約束
3. 添加prettiter 項目配置及約束
4. 添加stylelint相關配置及約束
5. 設置git 代碼提交檢查及eslint修復命令配置
6. 設置只對當前修改過的文件進行規范驗證，並提示錯誤信息
7. git 常見問題，及解決方式
8. 編輯器規范統一配置
9. 設置常用編輯器對eslint及stylelint 的格式化修復

　　1. 項目初始化

• 創建一個項目文件夾 eslint-stylelint-prettier 文件夾
• 在項目文件夾下運行 npm init -y 初始化項目將會自動生成package.json項目包依賴及其他相關配置的文件
• 創建eslint配置文件 .eslintrc.js,eslint的配置文件也可以是.eslintrc沒有.js后綴的一個json格式的配置文件
• 創建eslint忽略文件的配置文件.eslintignore用於過濾掉不需要進行eslint校驗的文件
• 創建stylelint配置文件.stylelintrc.js文件也可以是沒有有.js后綴的.stylelintrc的json格式的配置文件
• 創建stylelint忽略文件的配置文件.stylelintignore用於過濾掉不需要進行stylelint校驗的文件
• 創建prettier配置文件.prettierrc.js也可以是沒有js后綴名的json格式配置文件
• 創建編輯器默認配置文件.editorconfig
• 創建git倉庫管理忽略配置文件.gitignore
• 創建README.md 項目說明文件
• 創建src項目資源目錄

　　注意：不要漏了文件名之前的點，之所以使用js文件名作為配置是為了復用代碼

　　項目目錄結構如下

eslint-stylelint-prettier
| —— src                // 項目代碼存放文件夾
| —— .editorconfig      // 編輯器配置文件
| —— .eslintignore      // eslint忽略配置文件
| —— .eslintrc.js       // eslint配置文件
| —— .gitignore         // git忽略配置文件
| —— .prettierrc.js     // prettiter配置文件
| —— .stylelintignore   // stylelint忽略配置文件
| —— .stylelintrc.js    // stylelint配置文件
| —— package.json       // 項目包依賴及其他相關配置文件
| —— README.md          // readme文件

　　2. 添加eslint相關配置及規范約束

• 打開eslint的的配置文件.eslintrc.js文件
• 編寫以下配置

 module.exports = {
    env: {},
    extends: [],
    plugins: [],
    parse: ''
    parserOptions: {},
    globals: {},
    rules: {},
    settings: {}
}

　　配置說明：

1. env 配置用於規定一個環境定義了一組預定義的全局變量，可配置的屬性值參考地址
2. extends 配置表示繼承其他模塊相關的eslint 配置， 可配置的屬性方式參考地址
3. plugin 配置表示以插件的模式進行復用第三方的eslint配置依賴包，可配置的屬性值方式參考地址
4. parserOptions 配置當前JavaScript語言的支持環境，默認是 ECMAScript 5 語法。該配置可以覆蓋原有配置，以啟用對 ECMAScript 其它版本和 JSX 的支持.屬性值方式參考地址
5. parse 配置eslint的解析器
6. globals 配置用於添加該環境下的自定義的全局變量的變量名以防止eslint 報錯，屬性值配置方式參考地址
7. rules 配置自定義eslint規則覆蓋或者關閉原有相關配置，屬性值配置方式參考地址
8. settings 配置文件添加共享設置，或者自定義規則而且使它們可以訪問到相同的信息, 配置產考地址

 　　env配置選項編寫：

env: {
    browser: true,  // 瀏覽器環境
    node: true,     // node環境
    es6: true,      // es6 環境
},

　　extends配置選項編寫：

extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended','plugin:jsdoc/recommended',
　　 'prettier'
],

　　第一個 airbnb 表示繼承該庫的相關的eslint規則， 是一個比較通用且受歡迎的一個eslint 規范庫， 使用該庫需要安裝以上的一些依賴，關於Airbnb的詳細了解及保護規則可以直接查看npm包地址或者github倉庫源碼地址，需要安裝一下這些依賴來支持Airbnb。

　　第二個 airbnb/hooks 表示使用該庫的react/hooks 規范

　　說明： 我安裝的是作為項目開發依賴是因為我是打算將該項目作為一個eslint 規范相關的公共包依賴，如果是直接在某個現有項目中使用請安裝作為開發依賴 也就是 --save-dev

• npm install eslint --save
• npm install eslint-config-airbnb --save
• npm install eslint-plugin-import --save
• npm install eslint-plugin-react --save
• npm install eslint-plugin-jsx-a11y --save
• npm install eslint-plugin-react-hooks --save

　　第三個@typescript-eslint/eslint-plugin 配置是用於規范Typescript , 需要進行安裝以下依賴。需要查看詳細規則的可以查看npm包地址

• npm install @typescript-eslint/eslint-plugin
• npm install typescript --save

 　　第四個是 prettier 配置，需要安裝以下依賴

• npm install prettier --save
• npm install eslint-config-prettier --save
• npm install eslint-plugin-prettier --save    用於插件配置

　　最后一個是js注釋相關規范的，需要安裝以下依賴

• npm install eslint-plugin-jsdoc --save

 　　plugin配置選項編寫：

plugins: [
    'jsdoc',
    'react',
    'jsx-a11y',
    'import',
    'prettier',
    '@typescript-eslint'
],

　　插件配置與上面extends配置基本差不多一樣,

　　注意 jsx-a11y 中 a11y 是1234 的數字1 而不是字母 l, 一開始我寫錯誤了導致錯誤 Error: Failed to load plugin 'jsx-ally' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-jsx-ally'

　　parserOptions配置選項編寫：

parserOptions: {
    node: true,
    ecmaVersion: 11,
    sourceType: 'module',
    ecmaFeatures: {
        jsx: true
    }
},

上面的配置選項在配置選項地址有說明的非常清楚：https://eslint.bootcss.com/docs/user-guide/configuring#specifying-parser-options

　　添加 parse 選項配置用於規定eslint使用的解析器：

　　安裝依賴：npm install @typescript-eslint/parser --save

parser: '@typescript-eslint/parser', // 定義ESLint的解析器

　由於我所使用的項目是 typescript，所以選擇了typescript解析器 

　　添加globls選項配置，該配置因項目而異，並不是固定的，每個項目都可以不一樣

globals: {
    it: 'writable',
    Context: 'writable',
    Next: 'writable',
    wx: 'readonly',
},

　　需要注意的是該配置可以定義該全局變量是否可以修改或者是只讀

　　rules選項配置：

rules: {
    // https://eslint.bootcss.com/docs/rules/ 基本規則參考文檔地址
    'no-console': 'off', 　　　　　　　　　　　　　　 // 允許使用 console
    radix: 'off', 　　　　　　　　　　　　　　　　　　 // parseInt方法不強制使用第二個參數
    'linebreak-style': ['error', 'unix'], 　　　　// 強制使用Linux的LF換行符
    'guard-for-in': 'off', 　　　　　　　　　　　　  // 關閉要求 for-in 循環中有一個 if 語句
    'no-return-await': 'off', 　　　　　　　　　　　// 允許直接返回 await 結果
    'prefer-promise-reject-errors': 'off',　　　　// 不求使用 Error 對象作為 Promise 拒絕的原因
    'no-continue': 'off', 　　　　　　　　　　　　　// 允許使用 continue
    'spaced-comment': ['error', 'always'], 　　 // 注釋必須有空格
    'no-restricted-syntax': [　　　　　　　　　　　// 不允許使用的語法
        'error',
        {
            selector: 'ForOfStatement',
            message: '不允許使用 for of  語法',
        },
        {
            selector: 'LabeledStatement',
            message: 'Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.',
        },
        {
            selector: 'WithStatement',
            message: '不允許使用 with 語法',
        },
    ],
    'new-cap': 'error', 　　// 函數名首行大寫必須使用new方式調用，首行小寫必須用不帶new方式調用
    camelcase: [
        'warn',
        {
            // 強制使用駱駝拼寫法命名約定
            properties: 'always',
        },
    ],
    'max-params': ['error', 4], 　　　　　　　　// 函數最多四個參數
    'no-underscore-dangle': 'off', 　　　　　　// 標識符可以_開頭或結尾
    'no-nested-ternary': 'error', 　　　　　　　// 禁止使用嵌套的三元表達式,避免代碼難以理解
    'no-useless-constructor': 'error', 　　　　// 關閉禁止不必要的構造函數
    'no-plusplus': 'off', 　　　　　　　　　　　　// 關閉禁止使用++，--
    'no-unreachable': 'error', 　　　　　　　　// 禁止有不能執行的代碼
    'no-control-regex': 'off', 　　　　　　　　// 關閉禁止在正則表達式中使用控制字符
    'class-methods-use-this': 'off', 　　　　// 關閉強制類方法使用 this
    'no-use-before-define': 'off', 　　　　　// 關閉未定義前不能使用
    'no-shadow': 'error', 　　　　　　　　　　// 關閉外部作用域中的變量不能與它所包含的作用域中的變量或參數同名
    'no-extra-semi': 'error', 　　　　　　　　// 禁止多余的分號
    eqeqeq: ['error', 'always'], 　　　　　　// 要求使用 === 和 !==
    'jsx-quotes': ['error', 'prefer-double'], // 強制在 JSX 屬性中一致地使用雙引號

    // 相關文檔地址：https://www.npmjs.com/package/eslint-plugin-react reactEsllint配置參考地址
    'react/no-multi-comp': [
        'error',
        {
            // 禁止單個文件有多個組件定義, 允許多個無狀態組件
            ignoreStateless: true,
        },
    ],
    'react/no-array-index-key': 'warn', // 禁止使用數據索引作為元素的key值
    'react/jsx-pascal-case': ['error'], // 為用戶定義的 JSX 組件強制使用 PascalCase
    'react/no-unknown-property': [
        'error',
        {
            // 禁止使用未知的DOM屬性
            ignore: ['crossOrigin'],
        },
    ],
    'react/jsx-filename-extension': [
        'error',
        {
            // 限制可能包含JSX的文件擴展名
            extensions: ['.tsx', '.jsx', '.js'],
        },
    ],
    'react/prop-types': 'error', 　　　　　　　　　　// 防止React組件定義中缺少道具驗證
    'react/static-property-placement': 'off', 　　// 不限制靜態屬性書寫位置
    'react/destructuring-assignment': 'off', 　　// 關閉執行支持、狀態和上下文的解構賦值的一致使用,
    'react/prefer-stateless-function': 'off', 　　// 關閉強制將無狀態組件編寫為純函數,

    // 相關文檔地址：https://www.npmjs.com/package/eslint-plugin-import
    'import/no-unresolved': [
        'error',
        {
            // 沒有找到對應模塊不報錯
            ignore: ['(png|jpg|jpeg|gif|svg)$'],
        },
    ],
    'import/extensions': [
        // 允許導入的文件省略后綴
        'error',
        'ignorePackages',
        {
            js: 'never',
            mjs: 'never',
            jsx: 'never',
            ts: 'never',
            tsx: 'never',
        },
    ],
    'import/prefer-default-export': 'off', // 關閉單個導出時必須使用默認導出

    // 相關文檔地址：https://www.npmjs.com/package/eslint-plugin-jsx-a11y
    'jsx-a11y/alt-text': 'error', // 強制要求可選文本的所有元素都具有有意義的信息，以便傳回給最終用戶。
    'jsx-a11y/click-events-have-key-events': 'off', // 關閉強制一個可單擊的非交互元素至少有一個鍵盤事件監聽器。
    'jsx-a11y/no-static-element-interactions': 'off', // 關閉強制要求有交互操作的靜態標簽設置role屬性
    'jsx-a11y/no-noninteractive-element-interactions': 'off', // 關閉強制要求非交互語義標簽(main,hX,ul,ol,liarea)不包含交互事件(onClick等)

    // 相關文檔地址：https://www.npmjs.com/package/@typescript-eslint/eslint-plugin
    '@typescript-eslint/no-unused-vars': 'error', 　　　　　　　　　　// 不允許未使用的變量
    '@typescript-eslint/explicit-member-accessibility': 'off', 　　// 關閉要求類屬性和方法上的顯式可訪問性修飾符
    '@typescript-eslint/no-object-literal-type-assertion': 'off', // 關閉禁止對象字面值出現在類型斷言表達式中(來自TSLint的no-object-literal-type-assertion)
    '@typescript-eslint/explicit-function-return-type': 'off', 　　// 關閉要求函數和類方法的顯式返回類型
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off', // 關閉在導出的函數和類的公共類方法上要求顯式的返回和參數類型
    '@typescript-eslint/no-use-before-define': ['error'], 　　　　// 禁止在定義變量之前使用變量
    '@typescript-eslint/no-shadow': ['error'], 　　　　　　　　　　// 禁止變量聲明隱藏在外部作用域中聲明的變量
    '@typescript-eslint/no-var-requires': 0, 　　　　　　　　　　　　// 除了在import語句中，禁止使用require語句

    // 注釋規則 https://www.npmjs.com/package/eslint-plugin-jsdoc
    'jsdoc/require-jsdoc': [
        'error',
        {
            contexts: [
                // 排除一些常用聲明周期函數
                'MethodDefinition:not([key.name="componentDidMount"]):not([key.name="render"]):not([key.name="constructor"]):not([key.name="componentDidUpdate"]):not([key.name="shouldComponentUpdate"])',
            ],
            require: {
                FunctionDeclaration: true,
                ClassDeclaration: true, // 類及其方法注釋
                ArrowFunctionExpression: true, // 箭頭函數也需要注釋
                ClassExpression: true,
                FunctionExpression: true, // 普通函數注釋
            },
        },
    ],
    'jsdoc/check-tag-names': [
        'error',
        {
            // 防止與 prettier 沖突
            definedTags: ['format'],
        },
    ],
    'jsdoc/require-param': 'error',
    'jsdoc/require-param-description': 'error', // 函數參數描述
    'jsdoc/require-param-name': 'error',　　　// 參數名字
    'jsdoc/require-param-type': 'error', 　　// 函數的類型
    'jsdoc/require-returns': 'error', 　　// 函數的返回值
    'jsdoc/require-description': 'error',　　// 所有功能都要有描述
    'prettier/prettier': ['error'],　　　　// 應用 prettier
},

 　　setting選項配置：

settings: {
    'import/resolver': {
        node: {
            extensions: ['.js', '.ts', '.jsx', '.tsx', '.json'],
        },
    },
    'import/extensions': ['.js', '.ts', '.mjs', '.jsx', '.tsx'],
    jsdoc: {
        structuredTags: {
            format: {
                type: false,
            },
        },
    },
}

　　在這里我展示出當前我所使用的依賴的種類及包的版本，防止以后更新出現版本之間的不兼容錯誤，

"dependencies": {
    "@typescript-eslint/eslint-plugin": "^4.31.0",
    "@typescript-eslint/parser": "^4.31.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsdoc": "^36.1.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.25.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.4.0",
    "typescript": "^4.4.2"
  }

　　到此就已經配置完成 eslint的配置，然后我們進行簡單的測試一下看eslint 的規則效果是否生效

　　如果你使用的是webstorm 2020以上版本 你需要在設置里面開啟eslint配置，可以選擇自動或者手動，如下圖所示，如果使用的是其他編輯器可自行百度查找也是非常容易找到

　　

 　　注意：如果出現eslint 為找到 或者其他等依賴為找到的話，可能是沒有安裝依賴，或者是可能沒有及時加載依賴，可以選擇下載依賴或者重新啟動編輯器讓其生效

　　在src文件夾下創建一個index.js 文件，編寫一些代碼，發現編輯器有明顯的錯誤提示，這些提示都是eslint 的提示，你可以使用鼠標右鍵修復eslint，但是也是只能修復一部分代碼，有些還是需要自己補充上去

　　　　

　　

　　鼠標右鍵修復后的效果

　　

　　可以發現任然存在一些eslint 錯誤無法自動修復，這個時候我們需要進行手動的修復，修復之后的代碼如下，發現沒有出現一個錯誤提示信息了

 　　

　　3. 添加prettiter 項目配置及約束

　　　其實我們在配置eslint 的時候就已經開啟了prettier 的代碼校驗了，只是我們沒有進行相關配置 使用的是默認的配置。現在打開.prettierrc.js 配置文件進行添加相關配置，prettier的配置項相對eslint 而言要少很多。

詳細配置可參考prettier官網

module.exports = {
    printWidth: 120, 　　　　　　　　// 一行的最大字符數
    semi: true, 　　　　　　　　　　// 是否使用分號
    singleQuote: true, 　　　　　　// 是否使用單引號
    trailingComma: 'all', 　　　　// 末尾逗號在可能的地方都加上逗號
    bracketSpacing: true, 　　　　// 字面量對象括號中的空格開始和結束不需要
    jsxBracketSameLine: true, 　　// jsx元素結束放在最后一行結束
    arrowParens: 'always', 　　　　// 箭頭函數中的括號在需要的時候添加
    insertPragma: true, 　　　　　　// 添加頭注釋 @format 表示已經被prettier格式化過
    tabWidth: 2, 　　　　　　　　　　// tab寬度
    useTabs: true, 　　　　　　　　// 使用tab縮進
    eslintIntegration: true,  　　// eslint 規則優先防止沖突
};

　　配置完畢之后進行簡單的測試，由於是新增的prettier規則需要重新啟動項目或者重新啟動編輯器才能夠使之生效

 　　

 　　經過自動修復之后會在文件的頭部添加一個  /** @format */ 字樣的注釋，表示你的prettier配置已經生效，需要注意的是，在每次進行修改prettier配置的時候都需要重新啟動項目或者編輯器才能使新的prettier配置生效，我第一次修改配置的時候還以為是自己配置錯誤了，找了半天也不知道為什么配置不生效，而是在第二天來看項目的時候配置才看到生效，所以才知道是需要重新啟動項目才能生效

　　到此就完成了prettier的配置

　　4. 添加stylelint相關配置及約束

　　打開.stylelintrc.js 文件進行書寫stylelint 的相關配置， 編寫如下代碼

module.exports = {
    extends: ['stylelint-config-prettier', 'stylelint-config-recess-order', 'stylelint-config-standard'],
    plugins: ['stylelint-prettier', 'stylelint-order'],
    rules: {
        indentation: 2,
        'order/properties-order': ['never'],
        'max-nesting-depth': 4,
    },
};

　　需要進行安裝相關依賴，所需依賴如下

1. npm install stylelint --save
2. npm install stylelint-config-prettier --save
3. npm install stylelint-config-prettier --save
4. npm install stylelint-config-standard --save
5. npm install stylelint-config-recess-order --save
6. npm install stylelint-order --save
7. npm install stylelint-prettier --save

　　　其中包含 css 樣式書寫順序的規范以及縮進及一些常用的規范，具體的相關配置可產考stylelint官網

 　　webstorm 2020 以上版本開啟 stylelint 校驗，默認可能是關閉的所有需要去設置里面搜索stylelint 進行勾選開啟才能生效

　　

 　　開啟配置之后再在src文件夾下新建一個css文件，進行相關的簡單測試stylelint 會發現有stylelint 的報錯提示則表示配置成功

　　

　　進行stylelint 修復之后正常顯示效果如下，修復之后就沒有一處顯示有錯誤的地方，有些stylelint 錯誤也是無法自動修復的，需要手動的去修復這些stylelint的錯誤

　　

 　　由於 webstorm沒有自帶修復stylelint 的功能，需要自己配置，配置方式如下

 　　第一步，打開設置 --> 工具 --> 外部工具 --> 點擊加號，效果如下圖

　　

　　點擊加號之后會彈出配置選項彈框，編寫如下配置即可，點擊確定即可在鼠標右鍵看到 External Tool --> stylelint 點擊就可以自動修復stylelint 錯誤

　　      

 　　到此為止 stylelint 的相關配置也已經配置完畢

　　5. 設置git 代碼提交檢查及eslint修復命令配置

　　首先我們需要進行安裝依賴

1. npm install shelljs --save
2. npm install husky --save

　　安裝完成依賴之后，由於我使用的是新版本的 husky 與老版本的配置有所改變，進行了一番嘗試才配置成功

　　第一步在 package.json 文件添加 script 腳本

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prepare": "husky install",
    "checkEslint": "node checkEslint.js",
    "stylelintfix": "stylelint --config .stylelintrc.js **/*.{css,sass,scss,less} --fix",
    "lint": "eslint src koa --ext .js,.jsx,.ts,.tsx --cache --fix"
  },

　　說明：

1. 第一個腳本自動生成的就不說了，
2. 第二個腳本是用於 新版本 husky 配置的，在每次安裝依賴的時候（npm install）就會自動執行該命令，會項目文件加下面生成一個.husky 文件夾
3. 第三個腳本是用於git鈎子在commit 提交代碼時候進行代碼校驗的一個自定義腳本，等會會進行腳本的編寫與說明
4. 第四個腳本是用於自動修復項目下面的所有樣式文件的 stylelint 規則 ，這個腳本不推薦使用，因為會修改項目下的所有文件
5. 第五個腳本是用於自動修復項目下面的所有js、ts等文件的 eslint 規則，這個腳本也是會修改項目下面的所有文件

　　存在一個問題就是，我們現在只想對我們自己每次修改過的文件進行校驗，而不想每次提交代碼需要校驗整個項目的所有文件，這個會導致修改文件過多，而且還會導致本不應該是你修改的文件導致你都進行了修改，一次性修改過多文件容易導致代碼修改記錄不好查找，那么我們指向對現有項目的修改過的文件進行相關的校驗，我選擇的是一個自己編寫的簡單腳本，來進行驗證，在網上找了一些沒有發現什么好用的，所以最后選擇自己寫

　　第二步 husky 腳本配置

　　找到項目下面的 一個 .husky 的文件夾下創建一個 名字叫per-commit 的腳本文件，如下圖所示

　　

 　　在 pre-commit 腳本文件中編寫如下腳本

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run checkEslint

　　說明： 表示在提交代碼時候會自動觸發 git 的鈎子，會自動去運行配置的這個腳本文件 ，這個腳本文件會 運行 npm run checkEslint 自己編寫的一個nodeJS 腳本

　　第三步：編寫 checkEslint.js 腳本文件

/** @format */

const shell = require('shelljs');

let pass = 0;
// 檢查是否有安裝 git
if (!shell.which('git')) {
    shell.echo('Sorry, this script requires git');
    shell.exit(1);
}
// 獲取暫存區的所有文件名，過濾掉刪除的文件
const res = shell.exec('git diff --cached --diff-filter=d --name-only');
// 篩選出需要的文件
const fileList = res.grep('.*.(js|jsx|ts|tsx|css|less|scss|sass)$').split('\n');
const styleArr = [], scriptArr = [];
// 將所有文件分為 樣式文件和腳本文件
fileList.forEach(file => {
    if(/\.(less|css|scss|sass)$/.test(file)){
        styleArr.push(file);
    }
    if(/\.(js|jsx|ts|tsx)$/.test(file)) {
        scriptArr.push(file);
    }
});

// 如果有樣式文件則進行 stylelint 校驗
if(styleArr.length) {
    const script = styleArr.length === 1 ? styleArr.join() : `{${styleArr.join()}}`;
    const styleError = shell.exec(`stylelint --config .stylelintrc.js ${script}`);
    if(styleError.stdout) {
        pass = 1;
    }
}

// 如果有腳本文件則進行 eslint 校驗
if(scriptArr.length) {
    const script = scriptArr.length === 1 ? scriptArr.join() : `{${scriptArr.join()}}`;
    const scriptError = shell.exec(`eslint --config .eslintrc.js ${script}`);
    if(scriptError.stdout) {
        pass = 1;
    }
}

console.log(styleArr, scriptArr);
// 如果校驗不通過則退出程序
if(pass) {
    shell.exit(1);
}

　　這樣就能夠只校驗當前修改過的文件，沒有做修改的文件不會進行校驗， 編寫完成之后我們進行簡單的測試， 我在項目的src文件夾下創建了幾個樣式文件和幾個js文件

　　

 　　從圖上我們可以看出，由於有幾個文件的校驗沒有通過從而直接終止了該腳本的執行，從而阻止代碼提交，那如果我們在某些時候不想要進行校驗（繞過校驗）那么我們可以這么做，使用一下命令就能繞過驗證 直接提交代碼

git commit -m 'test' --no-verify

 　　

　　6. 編輯器規范統一配置

　　打開項目文件夾下的 .editorconfig 添加如下代碼

root = true
[*]
charset = utf-8
indent_style = tab
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

　　說明：表示應用於項目下的所有文件，編碼格式為utf-8, 縮進方式為tab， 縮進大小為2，換行方式為 lf 換行，文件以一個空白行進行結尾， 去除一行尾部的多余的空格

　　注意：如果項目出現換行的問題，因為windows電腦和Mac 等電腦的換行方式不同可能導致換行沖突，window 默認使用的換行是 CTRL Mac電腦的換行符主要為 LF, 如果出現當你拉取代碼出現，整個代碼都是eslint錯誤，那么可以使用 改命令進行修改git的換行配置， 詳細地址

git config --global core.autocrlf input

　　7. 代碼整理及復用配置

項目的代碼規范已經配置完成，但是還是無法很好的實現代碼復用，也就是，當我有多個項目都想使用這一套代碼規范時，就現在而言是只能通過復制粘貼到其他項目中去，這樣就會存在一個問題，那么當使用的項目一多，我需要修改或者添加某個規則時，那么需要單獨的去修改所有的項目配置。很明顯我們並不想去這樣修改，那么我們把這些代碼規范整理成一個依賴包即可，我們進行一下代碼的調整即可

　　將eslint的配置文件重新復制到在src目錄下創建的一個index,js

　　將stylelint的配置重新復制到src目錄下創建的一個stylelintConfig.js

　　將prettier的配置重新復制到scr目錄下創建的一個prettierConfig.js 

　　然后將配置文件修改為

　　.eslintrc.js

const eslintConfig = require('./src/index');
module.exports = eslintConfig;

　　.stylelintrc.js

const stylelintConfig = require('./src/stylelintConfig');
module.exports = stylelintConfig;

　　.prettierrc.js

const prettierConfig = require('./src/prettierConfig');
module.exports = prettierConfig;

　　如果是其他項目需要使用也就只需要安裝該項目依賴，然后直接引入就能使用, 其他項目使用方式

　　1. 下載依賴 npm install eslint-stylelint-prettier -D

　　2. 然后直接在項目下 配置使用該依賴的文件即可復用代碼，

{
  "extends": "eslint-stylelint-prettier"
}

　　此處遇到一個問題，暫未解決：出現加載失敗的問題，正常一般是不會出現加載失敗（Error: Failed to load config "eslint-stylelint-prettier" to extend from.），使用js配置文件進行加載又是可以。

　　github 地址：https://github.com/Liting1/eslint-stylelint-prettier

　　npmjs 地址：https://www.npmjs.com/package/eslint-stylelint-prettier