建网站几个按钮,jsp网站开发详解 赵增敏,中职学校专业建设规划,食品包装设计案例分析文章目录 一、ESLint 简介主要功能适用场景常用的 Eslint 配置项 二、Pritter 简介主要功能适用场景常用的 Prettier 配置项 三、Vue3 Vite TS 项目引入 Eslint Pritter1. 安装 ESLint2. 初始化 ESLint 配置3. 在 Vite 项目中启用 ESLint4. 在 VS Code 中启用 ESLint5. 集成… 文章目录 一、ESLint 简介主要功能适用场景常用的 Eslint 配置项 二、Pritter 简介主要功能适用场景常用的 Prettier 配置项 三、Vue3 Vite TS 项目引入 Eslint Pritter1. 安装 ESLint2. 初始化 ESLint 配置3. 在 Vite 项目中启用 ESLint4. 在 VS Code 中启用 ESLint5. 集成 Prettier6. 在 VS Code 中启用 Prettier 自动修复7. 可选优化集成 eslint-plugin-simple-import-sort7. 插件版本 四、最佳实践 一、ESLint 简介
ESLint 是一款 JavaScript 和相关语言如 TypeScript、Vue 等的静态代码分析工具主要用于发现代码中的问题并帮助开发者遵循代码规范。
主要功能
语法检查识别语法错误如漏掉的括号、未定义的变量等。代码质量检测帮助发现潜在的逻辑问题如未处理的 Promise。规范代码风格支持团队定义统一的代码风格如是否使用分号、缩进方式等。可扩展性强支持多种插件如 eslint-plugin-vue、eslint-plugin-react 等和规则自定义。
适用场景
项目开发保障团队代码风格一致减少错误。代码审查辅助检测潜在问题提升代码质量。
常用的 Eslint 配置项
二、Pritter 简介
Prettier 是一款专注于代码格式化的工具它以无争议的方式对代码进行排版处理确保代码风格的一致性。Prettier 不关注语法问题而是专注于代码的外观。
主要功能
格式化代码自动调整代码的缩进、换行、空格等使代码美观一致。支持多语言不仅支持 JavaScript还支持 HTML、CSS、JSON 等多种语言。集成方便可以与编辑器如 VS Code、ESLint 等工具无缝结合。
适用场景
团队合作确保团队代码格式一致。提高效率避免开发者因代码样式问题耗费时间。
常用的 Prettier 配置项
配置项描述默认值semi是否在语句末尾添加分号。truesingleQuote使用单引号还是双引号。falsetabWidth每个缩进级别的空格数。2trailingComma多行末尾是否添加逗号none、es5支持的语法、all所有地方es5printWidth每行代码的最大字符数超过时会自动换行。80bracketSpacing对象字面量中的括号之间是否加空格。truejsxBracketSameLineJSX 中 是否与最后一行的属性放在同一行。falsearrowParens箭头函数参数周围是否总是加上圆括号。always总是加括号avoid只有有多个参数时才加括号alwaysproseWrap处理 Markdown 文本时是否换行。preservehtmlWhitespaceSensitivity是否对 HTML 的空白符敏感。cssCSS 控制、strict严格敏感、ignore忽略空格cssendOfLine设置行尾字符支持lf、crlf、cr、auto。autoquoteProps对对象属性名使用引号的规则支持as-needed、consistent、preserveas-neededoverrides针对特定文件的配置覆盖。[]
三、Vue3 Vite TS 项目引入 Eslint Pritter
1. 安装 ESLint
使用以下命令安装 ESLint 及其相关依赖
npm install eslint eslint-plugin-vue typescript-eslint/parser typescript-eslint/eslint-plugin --save-deveslint核心 ESLint 工具。eslint-plugin-vue针对 Vue 文件的 ESLint 插件。typescript-eslint/parser支持 TypeScript 的解析器。typescript-eslint/eslint-plugin提供 TypeScript 相关规则。
2. 初始化 ESLint 配置
// .eslintrc.cjs
module.exports {root: true, // 表示该配置是根配置env: {browser: true,es2021: true,node: true,},extends: [eslint:recommended, // ESLint 推荐规则plugin:vue/vue3-recommended, // Vue3 推荐规则plugin:typescript-eslint/recommended, // TypeScript 推荐规则standard,],parser: vue-eslint-parser, // Vue 文件解析器parserOptions: {parser: typescript-eslint/parser, // TypeScript 解析器ecmaVersion: latest,sourceType: module,},plugins: [vue, typescript-eslint],rules: {// 可根据需要调整规则simple-import-sort/imports: error, // 自动排序 JavaScript 或 TypeScript 文件中的导入语句simple-import-sort/exports: error, // 自动排序 JavaScript 或 TypeScript 文件中的导出语句vue/multi-word-component-names: 0, // 避免使用单个词作为 Vue 组件的名称typescript-eslint/no-explicit-any: 0, // 防止在 TypeScript 代码中使用 any 类型space-before-function-paren: 0, // 控制函数定义或函数表达式括号前的空格no-use-before-define: 0, // 禁止在变量、函数或类定义之前使用它们import/no-absolute-path: 0, // 禁止使用绝对路径导入模块typescript-eslint/no-non-null-assertion: 0, // 禁止在代码中使用 非空断言操作符!camelcase: 0, // 使用驼峰命名参数typescript-eslint/no-unused-vars: warn, // 检查并报告那些在代码中声明但未被使用的变量、函数参数、导入等func-call-spacing: 0, // 控制在函数调用时函数名称与括号之间是否应该有空格typescript-eslint/no-this-alias: [error,{allowDestructuring: false,allowedNames: [self]}], // 禁止在 TypeScript 中使用 this 的别名// 禁用重复声明检测, ts 会强制执行这个规则// 如果不禁用这个规则, 会导致 ts 函数重载的时候报错no-redeclare: 0},
};3. 在 Vite 项目中启用 ESLint
安装 vite-plugin-eslint将 ESLint 集成到 Vite 的开发流程中
npm install vite-plugin-eslint --save-dev修改 vite.config.ts 文件
import { defineConfig } from vite;
import vue from vitejs/plugin-vue;
import eslint from vite-plugin-eslint;export default defineConfig({plugins: [vue(),eslint({exclude: [**/node_modules/**] // 排除所有 node_modules 文件夹之外的文件都进行 eslint 检查}),],
});4. 在 VS Code 中启用 ESLint 安装 ESLint 插件 在 VS Code 的扩展市场搜索并安装 ESLint 插件。
5. 集成 Prettier
安装 Prettier 及其 ESLint 插件
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev在 .eslintrc.js 文件中添加 Prettier
extends: [prettier // 关闭 ESLint 中与 Prettier 冲突的规则
],
plugins: [prettier // 将 Prettier 的格式化规则作为 ESLint 的规则使用
],配置 .prettierrc 文件
{singleQuote: true,semi: false,trailingComma: none,arrowParens: avoid,useTabs: false,tabWidth: 2,bracketSpacing: true,rangeStart: 0,htmlWhitespaceSensitivity: css,proseWrap: preserve
}6. 在 VS Code 中启用 Prettier 自动修复
打开 VS Code 设置Ctrl , 或 ⌘ ,搜索 Format On Save并启用。或在 .vscode/settings.json 中添加
{editor.formatOnSave: true,
}保存文件后会以 .prettierrc 文件中设置的规则对代码就行格式修正
7. 可选优化集成 eslint-plugin-simple-import-sort
协同开发时为了避免 import 顺序不一致导致的冲突需要对 import 文件引入顺序进行默认排序通过 simple-import-sort 可以实现报错和修复。
安装 eslint-plugin-simple-import-sort 插件
npm install eslint-plugin-simple-import-sort --save-dev在 .eslintrc.js 文件中添加 eslint-plugin-simple-import-sort
plugins: [simple-import-sort
],rules: {simple-import-sort/imports: error,simple-import-sort/exports: error,
}7. 插件版本
过新的版本可能会导致出错
devDependencies: {typescript-eslint/eslint-plugin: ^5.60.0,typescript-eslint/parser: ^5.60.0,eslint: ^7.32.0,eslint-config-prettier: ^8.8.0,eslint-config-standard: ^17.1.0,eslint-plugin-prettier: ^4.2.1,eslint-plugin-simple-import-sort: ^10.0.0,eslint-plugin-vue: ^9.15.1,prettier: ^3.3.3,vite-plugin-eslint: ^1.8.1,vue-eslint-parser: ^9.3.1
},四、最佳实践
ESLint 负责代码质量检测。 Prettier 负责代码格式化。 通过 eslint-config-prettier 解决两者规则冲突确保工具间协同工作。
