%20(2).svg)
项目简介
本项目是自动化代码格式化的配置项目，借助VScode环境，利用ESlint和Prettier插件，实现Typescript代码保存时自动校验格式并修复，可有效提高代码质量与开发效率。
项目的主要特性和功能
- 自动代码格式化：通过VScode插件ESlint和Prettier实现代码格式自动校验和修复。
- 自定义ESLint配置：确保代码遵循最佳实践和标准规则。
- 代码风格一致性：使用Prettier对代码进行格式化，确保代码风格一致。
- 保存时自动修复：配置VScode，实现保存代码时自动运行ESLint并修复问题。
安装使用步骤
安装VScode插件
打开VScode，搜索并安装ESlint和Prettier插件。安装完成后，按下Ctrl+Shift+P，输入setting.json，选择首选项：打开设置（json），插入以下配置：
json
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.workingDirectories": [
{ "mode": "auto" }
],
安装项目依赖
在项目根目录下运行以下命令安装依赖：
bash
yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --dev
或者
bash
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --save-dev
配置ESLint
在项目根目录下新建.eslintrc.js文件，写入以下内容：
javascript
module.exports = {
parser: "@typescript-eslint/parser",
parserOptions: {
sourceType: "module",
},
extends: [
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended",
],
rules: {
// 自定义规则
},
};
配置Prettier（可选）
在项目根目录下新建.prettierrc文件，配置Prettier选项，例如：
json
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "always",
"htmlWhitespaceSensitivity": "css",
"endOfLine": "lf"
}
配置VScode设置
确保VScode设置中启用了保存时自动运行ESLint并修复问题。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】