react typescript eslint prettier husky lint-staged

[yongheng2016]

• react-typescript 脚手架 template模板
  • cra-template-*
  • cra-template-rb
  • ts-all

npx create-react-app my-app --template typescript

• ~~lint-prettier安装~~ ~~npm i eslint --exact -D~~

• ~~eslint初始化~~ ~~node_modules/.bin/eslint --init~~

• 新

npm init @eslint/config

• find and force
• javascript
• ...

• prettier

npx mrm prettier

• husky lint-staged配置
  1. Node.js（windows系统）:ExperimentalWarning: The fs.promises API is experimental 根本原因是node的版本不是最新的，而在项目引入的模块是最新的，node.js的版本低于模块的版本： 降低mrm版本
  2. pre-commit：只针对当前提交的文件进行lint-staged

npx mrm lint-staged

2. 升级node版本(window 官网下载安装包覆盖)

• prettier,eslint格式化冲突

"extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended"
       ]

yarn add --dev  eslint-plugin-prettier eslint-config-prettier --exact

or

npm install eslint-plugin-prettier eslint-config-prettier --save-dev

• eslint-config-prettier 的作用是关闭eslint中与prettier相互冲突的规则。
• eslint-plugin-prettier 的作用是赋予eslint用prettier格式化代码的能力。 安装依赖并修改.eslintrc文件

• .vscode/settings.json. languages/identifiers

{
  "editor.formatOnSave": true,
  "typescript.tsdk": "node_modules/typescript/lib",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

---

• ESLint VS Code Extension
• Prettier VS Code Extension

---

• 添加到.vscode/extensions.json

{
    "recommendations": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "vue.vscode-typescript-vue-plugin",
        "vue.volar"
    ]
}

• 配置 .vscode/settings.json

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

• prettierrc

{
    "useTabs": true,
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "bracketSpacing": true,
    "trailingComma": "none",
    "overrides": [
        {
            "files": "*.md",
            "options": {
                "useTabs": false,
                "trailingComma": "none",
                "arrowParens": "avoid",
                "proseWrap": "never"
            }
        },
        {
            "files": "*.{json,babelrc,eslintrc,remarkrc,prettierrc}",
            "options": {
                "useTabs": false
            }
        }
    ]
}

---

• vscode prettier formatOnSave
• vue eslint prettier
• vscode-format-on-save
• eslint prettier冲突
• mrm