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 rules
  stylistic: {
    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 support
  jsonc: false,
  yaml: false,

  // `.eslintignore` is no longer supported in Flat config, use `ignores` instead
  ignores: [
    '**/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"
    }