28 Vue3之搭建公司级项目规范

可以看到保存的时候ref这行被提到了最前面的一行 要求内置库放在组件的前面称为auto fix，数组new arry改成了字面量，这就是我们配置的规范

• js规范使用的是airbnb规范
• 模块使用的是antfu 组合prettier&eslint

airbnb规范： https://github.com/airbnb/javascript?tab=readme-ov-file#arrow-functions

antfu 组合规范：

https://github.com/antfu/eslint-config/tree/feat/support-eslint-9

效果图：

 nvm包管理工具

NVM全称node.js version management ，专门针对node版本进行管理的工具，通过它可以安装和切换不同版本的node.js

使用场景

我目前的公司有很多项目，其中有一些老项目用的是vue2.5左右了webpack版本也比较低，只能使用10.16.0左右的node版本，但是也有一些新项目需要使用高版本的node例如14.17.3左右的这时候就可以使用nvm切换node 版本

1.安装nvm

安装过程中会提示两个存放目录地址 选择两个不同的文件夹即可

windows 安装地址

Releases · coreybutler/nvm-windows · GitHub

 nvm list available 查看nodejs 官方的所有版本 

nvm install （版本号）下载对应的node版本号

使用node的某个版本nvm use 22.0.0

nvm list 查看现在所有安装的node版本 

使用node-v查看版本

 tips:若之前电脑安装了node版本卸载即可 或者出现node -v无法识别重启电脑即可

 项目搭建

由于vite脚手架要禁止*.cjs 和 eslint版本升级废弃rc配置文件， 故重新搭建

1 前置条件

node版本>20

node 最好>20 因为eslint9的需要 本次项目node为22.0.0

 2 初始化项目

npm init vite@latest

vsocde需安装插件

 

antfu 组合prettier&eslint

npm i -D eslint @antfu/eslint-config eslint-plugin-format

eslint.config.js 

根目录配置新建eslint.config.js文件 用于eslint规则校验

// eslint.config.js
import antfu from '@antfu/eslint-config'export default antfu({// Enable stylistic formatting rules// stylistic: true,// Or customize the stylistic rulesstylistic: {indent: 2, // 4, or 'tab'quotes: 'single', // or 'double'},// TypeScript and Vue are auto-detected, you can also explicitly enable them:typescript: true,vue: true,// Disable jsonc and yaml supportjsonc: false,yaml: false,// `.eslintignore` is no longer supported in Flat config, use `ignores` insteadignores: ['**/fixtures',// ...globs],
}, {rules: {'no-console': 'off', //关闭console.log 报错},
})

VS Code support (auto fix)

.vscode目录下新建settings.json 用于保存带代码格式化

{// Enable the ESlint flat config support"eslint.experimental.useFlatConfig": true,// Disable the default formatter, use eslint instead"prettier.enable": false,"editor.formatOnSave": false,// Auto fix"editor.codeActionsOnSave": {"source.fixAll.eslint": "explicit","source.organizeImports": "never"},// Silent the stylistic rules in you IDE, but still auto fix them"eslint.rules.customizations": [{ "rule": "style/*", "severity": "off" },{ "rule": "format/*", "severity": "off" },{ "rule": "*-indent", "severity": "off" },{ "rule": "*-spacing", "severity": "off" },{ "rule": "*-spaces", "severity": "off" },{ "rule": "*-order", "severity": "off" },{ "rule": "*-dangle", "severity": "off" },{ "rule": "*-newline", "severity": "off" },{ "rule": "*quotes", "severity": "off" },{ "rule": "*semi", "severity": "off" }],// Enable eslint for all supported languages"eslint.validate": ["javascript","javascriptreact","typescript","typescriptreact","vue","html","markdown","json","jsonc","yaml","toml"]
}

配置已完成 当文件保存的时候即可格式化

新增脚本package.json

用于整个项目文件的规则校验

"scripts": {// ..."lint": "eslint .","lint:fix": "eslint . --fix"}