网站建设改版目的大岭山建设网站
可以看到保存的时候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"}