--- theme: smartblue --- # 前端项目配置 > 记录前端项目项目配置 > > 1. **ESLint** > 2. **Prettier** > 3. **Stylelint** > 4. **Husky** > 5. **Commitlint** > 6. **强制pnpm包管理** > > 环境准备: > > 1. **node**：v18.16.0 > > 2. **pnpm**：v8.6.1 ## 代码规范 ### 代码检查工具 * ESLint * Prettier * Stylelint #### ESLint 集成 * ```sh # 安装 pnpm i eslint -d # 生成配置文件 npx eslint --init ``` * **安装eslint**

* **要使用eslit做什么？**

* **项目使用的模型规范**

* **使用的框架**

* **是否使用TypeScript**

* **代码在哪里运行**

* **配置文件的类型**

* **本地的eslint没有找到，是否要下载对应的依赖**

* **选择要使用的包管理器**

而在Vue3项目环境代码校验的插件还有,所以通过pnpm进行下载并**创建eslintignore**文件对部分文件（**dist，node\_modules**）进行校验忽略并重新修改`.eslint.cjs`配置文件 ```sh # 让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查 "eslint-config-prettier": "^8.6.0", "eslint-plugin-import": "^2.27.5", "eslint-plugin-node": "^11.1.0", # 运行更漂亮的Eslint，使prettier规则优先级更高，Eslint优先级低 "eslint-plugin-prettier": "^4.2.1", # vue.js的Eslint插件（查找vue语法错误，发现错误指令，查找违规风格指南 "eslint-plugin-vue": "^9.9.0", # 该解析器允许使用Eslint校验所有babel code "@babel/eslint-parser": "^7.19.1", pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser ``` 这是新的`.eslint.cjs`配置文件,更多其他功能可以根据官方文档进行修改与配置 ```js // @see https://eslint.bootcss.com/docs/rules/ module.exports = { env: { browser: true, es2021: true, node: true, jest: true, }, /* 指定如何解析语法 */ parser: 'vue-eslint-parser', /** 优先级低于 parse 的语法解析配置 */ parserOptions: { ecmaVersion: 'latest', sourceType: 'module', parser: '@typescript-eslint/parser', jsxPragma: 'React', ecmaFeatures: { jsx: true, }, }, /* 继承已有的规则 */ extends: [ 'eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', ], plugins: ['vue', '@typescript-eslint'], /* * "off" 或 0 ==> 关闭规则 * "warn" 或 1 ==> 打开的规则作为警告（不影响代码执行） * "error" 或 2 ==> 规则作为一个错误（代码不能执行，界面报错） */ rules: { // eslint（https://eslint.bootcss.com/docs/rules/） 'no-var': 'error', // 要求使用 let 或 const 而不是 var 'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-unexpected-multiline': 'error', // 禁止空余的多行 'no-useless-escape': 'off', // 禁止不必要的转义字符 // typeScript (https://typescript-eslint.io/rules) '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量 '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型 '@typescript-eslint/no-non-null-assertion': 'off', '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。 '@typescript-eslint/semi': 'off', // eslint-plugin-vue (https://eslint.vuejs.org/rules/) 'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词 'vue/script-setup-uses-vars': 'error', // 防止