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" }]
}
           

学无止境,谦卑而行.