emo——給項目配置prettier，eslint，husky加強協作規範

前言

給自己的一個初始化項目配置一些規範;

Prettier - Code formatter

: Prettier - Code formatter

ESLint

: ESLint

Git gitignore

: https://git-scm.com/docs/gitignore#_pattern_format

内容

說實話整個配置起來,如果自己從頭到尾看文檔搞,真的有點耗時間;

主要分為

prettier

,

eslint

,

husky

三部分做配置,最後加上vscode對應的插件;

後續根據實際開發中遇到的坑會再往這裡添磚加瓦;

prettier

prettier cli

: https://prettier.io/docs/en/cli.html

prettier options

: https://prettier.io/docs/en/options.html

prettier ignore

: https://prettier.io/docs/en/ignore.html

安裝

pnpm add -D prettier   
           

配置.prettierrc

?> 在項目的根目錄添加

.prettierrc

檔案

!>詳細參數請檢視prettier options文檔;

{
    "printWidth": 100,
    "tabWidth": 4,
    "useTabs": false,
    "semi": false,
    "singleQuote": true,
    "trailingComma": "none",
    "bracketSpacing": true,
    "bracketSameLine": true
}
           

配置.prettierignore

?> 在項目的根目錄添加

.prettierignore

檔案,并根據自身實際情況配置;

!>詳細參數請檢視prettier ignore文檔;

node_modules/**
dist/**
release/**
public/**
docs/**
           

ESlint

ESlint getting-started

: http://eslint.cn/docs/user-guide/getting-started

ESlint configuring

: http://eslint.cn/docs/user-guide/configuring

ESlint ignoring-code

: the-eslintignore-file

安裝

pnpm add -D eslint
           

初始化配置

?> 配置檔案eslint

npx eslint --init
           

!> 安裝完成後提示缺少依賴,是以又安裝了下依賴

pnpm add -D @typescript-eslint/parser

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard-with-typescript',
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
  }
}
           

配置eslint-plugin-prettier及忽略檔案

pnpm add -D eslint-config-prettier eslint-plugin-prettier
           

module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true
    },
    extends: [
        'plugin:vue/vue3-essential',
        'standard-with-typescript',
        'plugin:prettier/recommended'
    ],
    overrides: [],
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        project: ['tsconfig.jsong']
    },
    plugins: ['vue'],
    ignorePatterns: ['node_modules/**', 'dist/**', 'release/**', 'public/**', 'docs/**'],
    rules: {}
}
           

husky

安裝

pnpm add -D husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"
           

配置package.json

{
"lint-staged": {
    "**/*.vue|js|ts": [
        "prettier --write --ignore-unknown",
        "eslint --fix",
        "git add ."
    ]
  },
}
           

送出

?> 在

git commit

時就會去檢測并進行修複;

問題

parserOptions.project

執行指令的時候報錯

parserOptions.project

parserOptions.project 報錯資訊

Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
           

解決方案

?> 在

eslintrc.js

的parserOptions配置項下配置

project

| stackoverflow;

.eslintrc.js

module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true
    },
    extends: [
        'plugin:vue/vue3-essential',
        'standard-with-typescript',
        'plugin:prettier/recommended'
    ],
    overrides: [],
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        project: ['tsconfig.jsong']
    },
    plugins: ['vue'],
    rules: {}
}
           

tsconfig.json

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "node",
        "importHelpers": true,
        "jsx": "preserve",
        "esModuleInterop": true,
        "resolveJsonModule": true,
        "sourceMap": true,
        "baseUrl": "./",
        "strict": true,
        "paths": {},
        "allowSyntheticDefaultImports": true,
        "skipLibCheck": true
    },
    "include": ["src", "electron"],
    "references": [{ "path": "./tsconfig.node.json" }]
}
           

學無止境,謙卑而行.