东莞做网站费用,嵌入式开发学什么,wordpress 旅游,网站建设服务yisinuo前言
如果在开发大型项目 同时为多人协作开发 那么 ESLint 在项目中极为重要 在使用 ESLint 的同时 也需要使用 Pretter插件 统一对代码进行格式化 二者相辅相成 缺一不可 1. 安装 VsCode 插件
在 VsCode 插件市场搜索安装 ESLint 和 Pretter 2. 安装依赖
这里直接在 pac…前言
如果在开发大型项目 同时为多人协作开发 那么 ESLint 在项目中极为重要 在使用 ESLint 的同时 也需要使用 Pretter插件 统一对代码进行格式化 二者相辅相成 缺一不可 1. 安装 VsCode 插件
在 VsCode 插件市场搜索安装 ESLint 和 Pretter 2. 安装依赖
这里直接在 package.json 内写入 之后使用 npm 等包管理器直接 install 安装即可 devDependencies: {vue/eslint-config-prettier: ^9.0.0,eslint: ^8.57.0,eslint-plugin-import: ^2.29.1,eslint-plugin-prettier: ^5.2.1,eslint-plugin-simple-import-sort: ^12.1.1,eslint-plugin-vue: ^9.23.0,eslint-plugin-vue-scoped-css: ^2.8.1,prettier: ^3.2.5,vite-plugin-eslint: ^1.8.1,} 以上依赖包具体作用如下 感兴趣可以了解 vue/eslint-config-prettier 这是一个 ESLint 配置专为 Vue 项目整合 Prettier 格式化而设计确保 ESLint 规则不会与 Prettier 的格式化规则发生冲突。 eslint ESLint 的核心库用于识别和报告 JavaScript 代码中的模式匹配帮助维护代码质量和风格一致性。 eslint-plugin-import 提供了一系列规则用于检查 ES6 的 import/export 语法帮助管理模块的导入和避免文件路径错误、拼写错误等问题。 eslint-plugin-prettier 将 Prettier 作为 ESLint 规则运行可以在使用 ESLint 的同时应用 Prettier 的代码格式化功能。 eslint-plugin-simple-import-sort 用于自动排序 import 语句以保持代码的整洁和一致性减少合并时的冲突。 eslint-plugin-vue 官方 Vue.js 的 ESLint 插件提供了适用于 Vue 文件的 ESLint 规则帮助维护 .vue 文件中的 JavaScript 和模板代码的质量。 prettier 一个流行的代码格式化工具用于自动格式化代码使其符合一致的风格。 vite-plugin-eslint 用于将 ESLint 集成到 Vite 构建流程中使得在使用 Vite 开发 Vue 项目时可以实时进行代码质量检查。 eslint-plugin-vue-scoped-css 这个插件专门用于检查Vue单文件组件中的scoped CSS确保样式的作用域正确无误。 3. 配置 VsCode 规则
1. 在项目根目录创建 .vscode 文件夹
如果你的项目使用 VsCode 打开 那这个文件夹应该是自动生成的
2. 创建规则文件
在 .vscode 文件夹里创建 extensions.json 和 settings.json
此时 您的文件结构理应如此 3. 编辑规则文件
extensions.json 主要作为实时检查和修正代码问题使用 需配合 VsCode 中 ESLint 扩展和 .eslintrc 配置文件使用 {recommendations: [dbaeumer.vscode-eslint]
}settings.json 主要作为对指定文件进行格式化 从而符合预定标准 {editor.formatOnType: true, // 控制编辑器在键入一行后是否自动格式化该行editor.formatOnSave: true, // 在保存时格式化文档eslint.codeAction.showDocumentation: {enable: true // 显示相关规则的文档链接},editor.codeActionsOnSave: {source.fixAll.eslint: explicit // 保存文件时 应用所有 ESLint 的自动修复},files.eol: \n, // 设置文件的结束行字符为 Unix 风格的换行符editor.tabSize: 2, // 设置制表符大小为2个空格eslint.format.enable: true, // 这允许 ESLint 作为格式化工具eslint.validate: [javascript, javascriptreact, vue],[vue]: {editor.formatOnSave: true,editor.defaultFormatter: dbaeumer.vscode-eslint},[javascriptreact]: {editor.formatOnSave: true,editor.defaultFormatter: dbaeumer.vscode-eslint},[javascript]: {editor.formatOnSave: true,editor.defaultFormatter: dbaeumer.vscode-eslint}
}4. 配置ESLint
在项目根目录创建 .eslintrc
.eslintrc 代码最后注释掉的 overrides 数组为对 Vue 组件及命名规范 建议打开并使用 {root: true,extends: [plugin:vue/vue3-recommended,plugin:vue-scoped-css/base,plugin:prettier/recommended,plugin:vue/vue3-essential,eslint:recommended,vue/eslint-config-prettier/skip-formatting],env: {browser: true, // 浏览器全局变量node: true, // Node.js全局变量和作用域jest: true, // Jest全局变量es6: true // 启用ES6的特性},globals: {defineProps: readonly, // 将defineProps定义为全局只读defineEmits: readonly // 将defineEmits定义为全局只读},plugins: [vue, // 使用Vue插件simple-import-sort // 使用simple-import-sort插件进行导入排序],parserOptions: {sourceType: module, // 指定来源的类型是模块ecmaFeatures: {jsx: true // 启用JSX}},settings: {import/extensions: [.js, .jsx] // 为导入语句指定文件扩展名},rules: {no-console: off, // 关闭禁止console规则no-continue: off, // 关闭禁止continue语句规则no-restricted-syntax: off, // 关闭限制特定语法规则no-plusplus: off, // 允许使用操作符no-param-reassign: off, // 关闭禁止对函数参数重新赋值规则no-shadow: off, // 关闭变量声明覆盖外层作用域变量规则guard-for-in: off, // 关闭需要在for-in循环中有if语句的规则import/extensions: off, // 关闭导入文件需包含文件后缀规则import/no-unresolved: off, // 关闭导入路径错误检查import/no-extraneous-dependencies: off, // 关闭禁止未列在package.json的依赖导入规则import/prefer-default-export: off, // 关闭优先使用默认导出的规则import/first: off, // 关闭所有导入语句之前不能有执行代码规则no-unused-vars: [error, // 启用未使用变量错误提示{argsIgnorePattern: ^_, // 忽略以下划线开头的参数varsIgnorePattern: ^_ // 忽略以下划线开头的变量}],no-use-before-define: off, // 关闭禁止在声明之前使用变量或函数规则class-methods-use-this: off, // 关闭类方法必须使用this规则simple-import-sort/imports: error, // 对导入语句进行排序simple-import-sort/exports: error // 对导出语句进行排序}// overrides: [// {// files: [*.vue],// rules: {// vue/component-name-in-template-casing: [2, kebab-case], // 组件名必须是kebab-case// vue/require-default-prop: 0, // 关闭属性必须有默认值规则// vue/multi-word-component-names: 0, // 关闭组件名必须为多单词规则// vue/no-reserved-props: 0, // 关闭禁止使用保留字作为组件属性规则// vue/no-v-html: 0, // 关闭禁止使用v-html指令规则// vue-scoped-css/enforce-style-type: [error, { allows: [scoped] }] // 强制使用scoped样式// }// }// ]
}5. 配置 Prettier
在项目根目录创建 .prettierrc.js
.prettierrc.js
export default {// 一行最多 120 字符..printWidth: 120,// 使用 2 个空格缩进tabWidth: 2,// 不使用缩进符而使用空格useTabs: false,// 行尾需要有分号semi: true,// 使用单引号singleQuote: true,// 对象的 key 仅在必要时用引号quoteProps: as-needed,// jsx 不使用单引号而使用双引号jsxSingleQuote: false,// 末尾需要有逗号trailingComma: all,// 大括号内的首尾需要空格bracketSpacing: true,// jsx 标签的反尖括号需要换行jsxBracketSameLine: false,// 箭头函数只有一个参数的时候也需要括号arrowParens: always,// 每个文件格式化的范围是文件的全部内容rangeStart: 0,rangeEnd: Infinity,// 不需要写文件开头的 prettierrequirePragma: false,// 不需要自动在文件开头插入 prettierinsertPragma: false,// 使用默认的折行标准proseWrap: preserve,// 根据显示样式决定 html 要不要折行htmlWhitespaceSensitivity: css,// vue 文件中的 script 和 style 内不用缩进vueIndentScriptAndStyle: false,// 换行符使用 lfendOfLine: lf,
};至此 所有配置结束
但需要注意的是 此时您的项目可能会各种红线
执行如下命令即可对所有文件执行格式化操作
npm run lint --fix
