vite 创建vue3项目，利用 Prettier 统一格式化代码，集成 ESLint、Stylelin ...

一、媒介

   在团队开发中，保持代码风格的同等性和代码质量的高度，对于项目的可维护性和可读性非常重要。为了实现这一目标，我们可以利用工具来自动格式化代码并进行代码校验，在开发过程中捕获潜在的题目，并提供修复建议。
  本示例中，我们将利用 Vite 来创建一个新的 Vue 3 项目。我们将利用 Prettier 来统一格式化代码，并集成 ESLint 和 Stylelint 进行代码校验规范。ESLint 用于检测 JavaScript 代码中的潜在题目和错误，而 Stylelint 则用于检测 CSS/SCSS 代码中的潜在题目和错误。
  这样的配置可以或许资助我们在开发过程中更早地捕获题目，并提供规范的修复建议，从而提高代码质量和团队合作效率。
  二、创建项目

1、情况预备

• node v18.17.1
  
• pnpm 8.15.5
  

2、初始化项目

本项目利用vite进行构建，vite官方中文文档参考：cn.vitejs.dev/guide/
利用pnpm进行项目创建以及依靠下载等。（当然npm、yarn也行）
pnpm:performant npm ，意味“高性能的 npm”。pnpm由npm/yarn衍生而来，解决了npm/yarn内部潜在的bug，极大的优化了性能，扩展了利用场景。被誉为“最先辈的包管理工具”
pnpm安装指令

1. npm i -g pnpm

复制代码

项目初始化下令:
cmd里执行或者在VSCode终端执行即可

1. pnpm create vite

复制代码

项目目录布局如下：

进入到项目根目录pnpm install安装全部依靠.安装完依靠运行程序:pnpm run dev
运行完毕项目跑在http://127.0.0.1:5173/,可以访问你得项目啦

三、项目配置

1、eslint配置

eslint中文官网:http://eslint.cn/
ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具
首先安装eslint

1. pnpm i eslint -D

复制代码

1.1、 生成配置文件:.eslintrc.cjs

1. npx eslint --init

复制代码

该下令会向我们提几个题目，然后根据我们的回答生成配置文件

安装配置完成之后，src文件夹下面会多一个.eslintrc.cjs配置文件
.eslintrc.cjs配置文件内容

1. module.exports = {
2.   //运行环境
3.   env: {
4.     browser: true, //浏览器端
5.     es2021: true, //es2021
6.   },
7.   //规则继承
8.   extends: [
9.     //全部规则默认是关闭的,这个配置项开启推荐规则,推荐规则参照文档
10.     //比如:函数不能重名、对象不能出现重复key
11.     "eslint:recommended",
12.     "plugin:@typescript-eslint/recommended", //ts语法规则
13.     "plugin:vue/vue3-essential", //vue3语法规则
14.   ],
15.   //要为特定类型的文件指定处理器
16.   overrides: [
17.     {
18.       env: {
19.         node: true,
20.       },
21.       files: [".eslintrc.{js,cjs}"],
22.       parserOptions: {
23.         sourceType: "script",
24.       },
25.     },
26.   ],
28.   /**
29.    * 指定解析器:解析器
30.    * Esprima 默认解析器Babel-ESLint babel解析器
31.    * @typescript-eslint/parser ts解析器
32.    */
33.   parserOptions: {
34.     ecmaVersion: "latest", //校验ECMA最新版本
35.     parser: "@typescript-eslint/parser",
36.     sourceType: "module", //设置为"script"（默认），或者"module"代码在ECMAScript模块中
37.   },
38.   /**
39.    * ESLint支持使用第三方插件。在使用插件之前，您必须使用npm安装它
40.    * 该eslint-plugin-前缀可以从插件名称被省略
41.    */
42.   plugins: ["@typescript-eslint", "vue"],
43.   //eslint规则
44.   rules: {},
45. };

复制代码

1.2、vue3情况代码校验插件

vue3情况代码校验插件

1. # 让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查
2. "eslint-config-prettier": "^9.1.0",
3. "eslint-plugin-import": "^2.29.1",
4. "eslint-plugin-node": "^11.1.0",
5. # 运行更漂亮的Eslint，使prettier规则优先级更高，Eslint优先级低
6. "eslint-plugin-prettier": "^5.1.3",
7. # vue.js的Eslint插件（查找vue语法错误，发现错误指令，查找违规风格指南
8. "eslint-plugin-vue": "^9.24.0",
9. # 该解析器允许使用Eslint校验所有babel code
10. "@babel/eslint-parser": "^7.24.1",

复制代码

安装指令

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

复制代码

1.3、修改.eslintrc.cjs配置文件

1. module.exports = {
2.   //运行环境
3.   env: {
4.     browser: true, //浏览器端
5.     es2021: true, //es2021
6.     node: true,
7.     jest: true,
8.   },
9.   //规则继承
10.   extends: [
11.     //全部规则默认是关闭的,这个配置项开启推荐规则,推荐规则参照文档
12.     //比如:函数不能重名、对象不能出现重复key
13.     'eslint:recommended',
14.     'plugin:@typescript-eslint/recommended', //ts语法规则
15.     'plugin:vue/vue3-essential', //vue3语法规则
16.     'plugin:prettier/recommended',
17.   ],
18.   //要为特定类型的文件指定处理器
19.   overrides: [
20.     {
21.       env: {
22.         node: true,
23.       },
24.       files: ['.eslintrc.{js,cjs}'],
25.       parserOptions: {
26.         sourceType: 'script',
27.       },
28.     },
29.   ],
31.   /* 指定如何解析语法 */
32.   parser: 'vue-eslint-parser',
33.   /** 优先级低于 parse 的语法解析配置 */
34.   /**
35.    * 指定解析器:解析器
36.    * Esprima 默认解析器Babel-ESLint babel解析器
37.    * @typescript-eslint/parser ts解析器
38.    */
39.   parserOptions: {
40.     ecmaVersion: 'latest', //校验ECMA最新版本
41.     parser: '@typescript-eslint/parser',
42.     sourceType: 'module', //设置为"script"（默认），或者"module"代码在ECMAScript模块中
43.     jsxPragma: 'React',
44.     ecmaFeatures: {
45.       jsx: true,
46.     },
47.   },
48.   /**
49.    * ESLint支持使用第三方插件。在使用插件之前，您必须使用npm安装它
50.    * 该eslint-plugin-前缀可以从插件名称被省略
51.    */
52.   plugins: ['@typescript-eslint', 'vue'],
54.   /*
55.    * eslint规则
56.    * "off" 或 0    ==>  关闭规则
57.    * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
58.    * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
59.    */
60.   rules: {
61.     // eslint（https://zh-hans.eslint.org/docs/latest/rules/）
62.     'no-var': 'error', // 要求使用 let 或 const 而不是 var
63.     'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
64.     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
65.     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
66.     'no-unexpected-multiline': 'error', // 禁止空余的多行
67.     'space-before-function-paren': 'off', // 函数括号前面是否需要空格
68.     'no-use-before-define': 'off', // 禁止在变量定义前使用变量
69.     'no-unused-vars': 'off', // 禁止未使用过的变量
70.     'no-undef': 'off', // 禁止使用未定义的变量
71.     'no-useless-escape': 'off', // 禁止不必要的转义字符
72.     'prettier/prettier': 'error', // 代码格式化
73.     'comma-dangle': 'off', // 对象或数组最后一个元素后面是否需要加逗号
74.     // 结尾必须有分号;
75.     semi: [
76.       'error',
77.       'always',
78.       {
79.         omitLastInOneLineBlock: true,
80.       },
81.     ],
83.     // typeScript (https://typescript-eslint.io/rules)
84.     '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
85.     '@typescript-eslint/prefer-ts-expect-error': 'off', // 禁止使用 @ts-ignore
86.     '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
87.     '@typescript-eslint/no-var-requires': 'off', // 允许使用 require() 函数导入模块
88.     '@typescript-eslint/no-empty-function': 'off', // 禁止空函数
89.     '@typescript-eslint/no-use-before-define': 'off', // 禁止在 函数/类/变量 定义之前使用它们
90.     '@typescript-eslint/ban-types': 'off', // 禁止使用特定类型
91.     '@typescript-eslint/no-non-null-assertion': 'off', // 不允许使用后缀运算符的非空断言(!)
92.     '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
93.     '@typescript-eslint/explicit-module-boundary-types': 'off', // 要求函数和类方法的显式返回类型
94.     '@typescript-eslint/ban-ts-comment': 'error', // 禁止在类型注释或类型断言中使用 // @ts-ignore
95.     '@typescript-eslint/semi': 'off',
97.     // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
98.     'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
99.     'vue/no-v-model-argument': 'off', // 禁止在 v-model 指令中使用 argument 选项
100.     'vue/no-reserved-component-names': 'off', // 禁止使用保留字命名组件
101.     'vue/attributes-order': 'off', // 禁止组件的属性顺序不一致
102.     'vue/one-component-per-file': 'off', // 要求每个文件只有一个组件
103.     'vue/no-multiple-template-root': 'off', // 禁止在单个文件中使用多个根元素
104.     'vue/max-attributes-per-line': 'off', // 限制每行属性的最大数量
105.     'vue/multiline-html-element-content-newline': 'off', // 限制多行 HTML 元素内容的缩进
106.     'vue/singleline-html-element-content-newline': 'off', // 限制单行 HTML 元素内容的缩进
107.     'vue/require-default-prop': 'off', // 禁止在 props 定义中不指定默认值
108.     'vue/require-explicit-emits': 'off', // 要求显式声明 emits 事件
109.     'vue/html-closing-bracket-newline': 'off', // 禁止在 HTML 结束标签的前后都有换行符
110.     'vue/attribute-hyphenation': 'off', // 强制属性命名使用连字符线分隔
111.     'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
112.     'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
113.     'vue/no-v-html': 'off', // 禁止使用v-html指令
114.     'vue/custom-event-name-casing': 'error', // 自定义事件名称必须使用驼峰式命名法
115.   },
116. };

复制代码

1.4、创建 .eslintignore 忽略文件

编辑 .eslintignore,添加不必要校验的目录、文件

1. /dist
2. dist
3. /node_modules
4. node_modules
5. tsconfig.json
6. *.svg
7. *.png
8. *.jpg
9. *.jpeg
10. *.scss
11. *.gif
12. *.webp
13. *.ttf
14. index.html
15. *.md

复制代码

1.5、运行脚本

package.json新增两个运行脚本

1. "scripts": {
2.     "lint": "eslint src",
3.     "fix": "eslint src --fix",
4. }

复制代码

2、prettier配置

官网：https://prettier.io/docs/en/install
有了eslint，为什么还要有prettier？eslint针对的是javascript，他是一个检测工具，包含js语法以及少部门格式题目，在eslint看来，语法对了就能保证代码正常运行，格式题目属于其次；
而prettier属于格式化工具，它看不惯格式不统一，以是它就把eslint没干好的事接着干，别的，prettier支持
包含js在内的多种语言。
总结起来，eslint和prettier这俩兄弟一个保证js代码质量，一个保证代码雅观。
2.1、安装依靠包

1. pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

复制代码

2.2、创建 .prettierrc

项目根目录下创建 .prettierrc文件，并添加对应的规则

1. //命令创建
2. node --eval "fs.writeFileSync('.prettierrc','{}\n')"

复制代码

添加对应规则：参考官网：https://prettier.io/docs/en/options

1. {
2.   "singleQuote": true,
3.   "semi": false,
4.   "bracketSpacing": true,
5.   "htmlWhitespaceSensitivity": "ignore",
6.   "endOfLine": "auto",
7.   "trailingComma": "all",
8.   "tabWidth": 2
9. }

复制代码

2.3、创建.prettierignore忽略文件

在项目根目录下创建 .prettierignore 文件
以下文件夹下内容不必要被格式化

1. # 忽略格式化文件 (根据项目需要自行添加)
2. /dist/*
3. /html/*
4. .local
5. /node_modules/**
6. **/*.svg
7. **/*.sh
8. /public/*
9. .idea
10. .vscode
11. .hbuilderx
12. src/manifest.json
13. src/pages.json
14. *.md
15. *.woff
16. *.ttf
17. *.yaml
18. /docs
19. .husky
20. /bin

复制代码

*通过pnpm run lint去检测语法，如果出现不规范格式,通过pnpm run fix 修改
3、stylelint配置

stylelint为css的lint工具。可格式化css代码，查抄css语法错误与不合理的写法，指定css书写顺序等。
3.1、安裝依靠

1. pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

复制代码

3.2、创建.stylelintrc.cjs配置文件

参考：https://stylelint.io/user-guide/configure

1. // @see https://stylelint.bootcss.com/
3. module.exports = {
4.   extends: [
5.     'stylelint-config-standard', // 配置stylelint拓展插件
6.     'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
7.     'stylelint-config-standard-scss', // 配置stylelint scss插件
8.     'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
9.     'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
10.     'stylelint-config-prettier', // 配置stylelint和prettier兼容
11.   ],
12.   overrides: [
13.     {
14.       files: ['**/*.(scss|css|vue|html)'],
15.       customSyntax: 'postcss-scss',
16.     },
17.     {
18.       files: ['**/*.(html|vue)'],
19.       customSyntax: 'postcss-html',
20.     },
21.   ],
22.   ignoreFiles: [
23.     '**/*.js',
24.     '**/*.jsx',
25.     '**/*.tsx',
26.     '**/*.ts',
27.     '**/*.json',
28.     '**/*.md',
29.     '**/*.yaml',
30.   ],
31.   /**
32.    * null  => 关闭该规则
33.    * always => 必须
34.    */
35.   rules: {
36.     'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
37.     'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
38.     'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
39.     'no-empty-source': null, // 关闭禁止空源码
40.     'selector-class-pattern': null, // 关闭强制选择器类名的格式
41.     'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
42.     'block-opening-brace-space-before': 'always', //大括号之前必须有一个空格或不能有空白符
43.     'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box
44.     'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask
45.     'selector-pseudo-class-no-unknown': [
46.       // 不允许未知的选择器
47.       true,
48.       {
49.         ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性，修改element默认样式的时候能使用到
50.       },
51.     ],
52.   },
53. }

复制代码

3.3、创建.stylelintignore忽略文件

1. /node_modules/*
2. /html/*
3. /dist/*
4. /public/*
5. public/*
6. /dist*
7. /docs/**/*

复制代码

3.4、运行脚本

1. "scripts": {
2.         "lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
3. }

复制代码

1. "scripts": {
2.     "dev": "vite --open",
3.     "build": "vue-tsc && vite build",
4.     "preview": "vite preview",
5.     "lint": "eslint src",
6.     "fix": "eslint src --fix",
7.     "format": "prettier --write "./**/*.{html,vue,ts,js,json,md}"",
8.     "lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
9.     "lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
10.   },

复制代码

当我们运行pnpm run format的时间，会把代码直接格式化

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。