国外科技感强的网站,互动营销是什么,网站建设策划书5000字,中国核工业第二二建设有限公司招聘Eslint、Prettier、.vscode 配置
首先#xff0c;三者关联及各自作用
ESLint 做语法和规范校验#xff0c;结合 Prettier 负责格式化。.vscode 通过 ESLint 插件自动运行校验和修复#xff0c;保证团队开发体验统一。
其次 Eslint、Prettier 的关联
Prettier 负责代码的…Eslint、Prettier、.vscode 配置
首先三者关联及各自作用
ESLint 做语法和规范校验结合 Prettier 负责格式化。.vscode 通过 ESLint 插件自动运行校验和修复保证团队开发体验统一。
其次 Eslint、Prettier 的关联
Prettier 负责代码的排版和格式保证风格统一省去开发者争论格式问题时间。ESLint 负责代码规范和质量发现潜在问题和错误保持代码健康。同时用的话Prettier 负责格式ESLint 负责规范两者互不冲突搭配更完美。
开发配置示例
接下来是一套适合 React Vite TypeScript 项目结合 ESLint Prettier VS Code 的完整配置示例保证团队开发体验统一且规范。
1. 安装依赖
npm install --save-dev eslint prettier eslint/js eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y typescript-eslint/eslint-plugin typescript-eslint/parser eslint-plugin-prettier eslint-config-prettier// 依赖列表eslint
prettier
eslint/js
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
typescript-eslint/eslint-plugin
typescript-eslint/parser
eslint-plugin-prettier
eslint-config-prettier2. eslint.config.js
// eslint.config.js// 引入官方推荐的 JS 基础规则等同于 eslint:recommended
import js from eslint/js;
// 引入 TypeScript ESLint 插件和解析器包含推荐规则
import tseslint from typescript-eslint;
// 引入 React、React Hooks、可访问性a11y相关 ESLint 插件
import pluginReact from eslint-plugin-react;
import pluginReactHooks from eslint-plugin-react-hooks;
import pluginJsxA11y from eslint-plugin-jsx-a11y;
// 引入 prettier 插件用于让 ESLint 检查 Prettier 格式问题
import pluginPrettier from eslint-plugin-prettier;
// 引入 prettier 配置文件传入 ESLint 中校验 prettier 规则可选
import prettierConfig from ./prettier.config.js;/** type {import(eslint).Linter.FlatConfig[]} */
// Flat Config 是一种基于数组的配置方式每个对象对应一类文件或规则
export default [{// 匹配需要被 ESLint 校验的文件files: [**/*.{js,cjs,mjs,ts,tsx,jsx}],// 配置解析器和语言环境languageOptions: {parser: tseslint.parser, // 使用 TypeScript 的解析器parserOptions: {ecmaVersion: latest, // 支持最新 ECMAScript 语法sourceType: module, // 支持 ES 模块ecmaFeatures: {jsx: true, // 支持 JSX},},},// 注册使用到的插件plugins: {react: pluginReact,react-hooks: pluginReactHooks,jsx-a11y: pluginJsxA11y,prettier: pluginPrettier,},// 合并推荐规则 自定义规则rules: {// 官方 JS 推荐规则比如禁止未定义变量...js.configs.recommended.rules,// TypeScript 推荐规则比如类型注解错误、any 等...tseslint.configs.recommended.rules,// React 推荐规则比如 prop 校验...pluginReact.configs.recommended.rules,// 可访问性规则比如图片缺少 alt 属性...pluginJsxA11y.configs.recommended.rules,// React Hooks 推荐规则比如 useEffect 必须传依赖数组...pluginReactHooks.configs.recommended.rules,// 启用 prettier 规则会把 prettier 的格式问题当成 ESLint errorprettier/prettier: [error, prettierConfig],// 关闭 React 17 中不再需要的规则无需 import Reactreact/react-in-jsx-scope: off,},// 额外配置插件所需的环境如 react 版本自动识别settings: {react: {version: detect,},},},
];
3. prettier.config.js
// prettier.config.js
/** type {import(prettier).Config} */
export default {// 每行最大长度超过就换行printWidth: 100,// 缩进的空格数比如 2 表示缩进为两个空格tabWidth: 2,// 每行末尾是否加分号true 表示加semi: true,// 使用单引号代替双引号比如 hello 而不是 hellosingleQuote: true,// 多行对象或数组的最后一项是否加逗号es5 表示对象/数组/函数参数中尾项加逗号trailingComma: es5,// 对象中的大括号是否有空格true 表示 { foo: bar } 而不是 {foo: bar}bracketSpacing: true,// 箭头函数的参数是否加括号always 表示即使只有一个参数也加括号如 (x) xarrowParens: always,// 设置换行符风格auto 表示跟随系统避免 git diff 因换行符差异endOfLine: auto,// 引入 Prettier 插件自动对 Tailwind CSS 类名进行排序plugins: [prettier-plugin-tailwindcss],
};
4. .vscode/settings.json
// .vscode/settings.json
{// 禁用 VS Code 自带的保存时自动格式化功能交由 ESLint 处理editor.formatOnSave: false,// 禁用默认格式化器避免与 ESLint/Prettier 冲突editor.defaultFormatter: null,// 配置 VS Code 中哪些文件类型由 ESLint 插件进行校验eslint.validate: [javascript, // 普通 JS 文件javascriptreact, // React 中的 JS.jsxtypescript, // TypeScript 文件typescriptreact // React 中的 TS.tsx],// 启用保存时的代码操作功能Code Action用于触发 ESLint 的自动修复editor.codeActionsOnSave: {source.fixAll: true, // 启用所有类型的修复包括 ESLint 和其他插件source.fixAll.eslint: true // 启用 ESLint 的自动修复比如修复格式、空格、变量未使用等}
}
最终结构
my-project/
├─ .vscode/
│ └─ settings.json
├─ eslint.config.js
├─ prettier.config.js
├─ package.json
├─ src/
│ └─ ...
