【源码】基于ESLint和Prettier的TypeScript代码自动格式化项目

项目简介

本项目用于帮助开发者在编写TypeScript代码时实现代码的自动格式化与校验。通过集成ESLint和Prettier，在代码保存时自动进行语法检查和代码格式化，提升代码质量和开发效率。

项目的主要特性和功能

1. 集成ESLint：在代码保存时进行语法检查和错误提示，保证代码质量。
2. 集成Prettier：在代码保存时自动格式化代码，保持代码风格统一。
3. 配置说明详尽：提供详细的配置说明和参考资料，方便开发者自定义配置。

安装使用步骤

1. 确认已安装VScode编辑器，在编辑器中搜索并安装ESlint、Prettier插件。
2. 在项目根目录下，根据文件说明安装所需的依赖插件：
   • 使用yarn：yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --dev
   • 使用npm：npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --save-dev
3. 在项目根目录下新建.eslintrc.js文件，写入如下ESLint配置： javascript module.exports = { parser: "@typescript-eslint/parser", parserOptions: { sourceType: "module", }, extends: [ "plugin:@typescript-eslint/recommended", "prettier/@typescript-eslint", "plugin:prettier/recommended" ], rules: { // 可用于覆盖从扩展配置中指定的规则 // 例如 "@typescript-eslint/explicit-function-return-type": "off", }, };
4. （可选）根据项目需求，新建.prettierrc文件，配置Prettier相关选项，常用设置示例如下： json { "printWidth": 80, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": false, "trailingComma": "es5", "bracketSpacing": true, "arrowParens": "always", "htmlWhitespaceSensitivity": "css", "endOfLine": "lf" } 更多配置可参考Prettier文档。
5. 完成配置后，保存TypeScript文件，ESLint和Prettier将自动进行代码校验和格式化。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】