vscode使用eslint, prettierrc ，precommit优化项目代码

eslint 用于代码校验

• 安装 pnpm i eslint -D
• 生成.eslintrc.json文件 npx eslint --init

命令式的生成eslint

然后在你的项目下可以看到.eslintrc.js文件

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

这时候查看项目中代码，你的项目依赖都装完了，

这时候eslint起作用了，会报react muse be in scope when use JSX

加上

extends: [
            ...
            'plugin:react/jsx-runtime'
]

这时候警告就消失了 如果现在我们想保存时自动格式化代码 可以使用prettier这个插件

prettier 优化代码格式，比如缩进、空格、分号等等

1. 首先在vscode中安装Prettier - Code formatter插件，然后在项目下.vscode中的 新建settings.json 设置

{
	"editor.formatOnSave": true,
	"[javascript]": {  // 设置 javascript 的默认格式化工具为 prettier
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[typescript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
}

2. 在项目下配置.prettierrc.js 文件

module.exports = {
	bracketSpacing: false, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
	tabWidth: 2, // 缩进字节数
	useTabs: true, // 缩进不使用tab，使用空格
	semi: true, // 句尾添加分号
	singleQuote: true, // 使用单引号代替双引号
	jsxBracketSameLine: true, // 在jsx中把'>' 是否单独放一行
	trailingComma: 'es5', // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
	printWidth: 100, // 超过最大值换行
	arrowParens: 'avoid', // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
	htmlWhitespaceSensitivity: 'ignore',
};

然后.eslintrc.js 加上

extends: [
        ...,
        'plugin:prettier/recommended',
],
...,
rules: {
    'prettier/prettier': ['error'],
},

在自动保存时会查看输出发现这个配置已经生效了

4. 还可以使用命令行，这样可以对项目中所有代码格式化

需要安装pnpm i prettier -D

  "scripts": {
    ...
    "lint": "prettier --write \"{src,mock}/**/*.{js,css,less}\""
  },

5. 执行pnpm lint 自动将src项目下代码格式化

Git 的 Pre Commit 钩子，在提交代码之前使用lint检查

使用pre commit 需要两个npm插件

• husky 可以用于实现各种 Git Hook。这里主要用到 pre-commit这个 hook，在执行 commit 之前，运行一些自定义操作
• lint-staged 用于对 Git 暂存区中的文件执行代码检测

1. 安装 pnpm add -D husky lint-staged
2. 在package.json中配置以下代码

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "eslint",
      "prettier --write",
      "git add"
    ]
  },

示例，你可以根据你项目的技术栈配置相应的代码检查。

• eslint是eslint语法检查
• prettier --write会自动美化你的代码格式
• git add将更改后到文件添加到暂存区

当在终端输入 git commit命令提交代码的时候，Lint 程序便会自动检查本次提交所修改的文件是否符合本项目的代码规范。如果代码不符合规范，便会拒绝提交代码。

如果想要跳过 Lint 程序，可以使用 git commit -no-verify 进行提交