创建 Vue3 项目并结合 ESLint & Prettier 配置代码风格

一、所需环境

我使用的环境是 node.js 20.1.0 推荐使用nvm管理node.js版本，如果 node.js 版本过低可能导致创建项目时报错。

二、创建Vue3项目

1.打开需要创建项目的目录，输入cmd打开命令提示符


2.创建Vue3项目

npm init vue@latest

根据你的需要选择对应的功能，因为我们要配置ESLint & Prettier，所以必须要引入这两个。

3.安装插件
使用VSCode打开项目

必装插件ESLint

可选插件Prettier，它会提示你这个项目是否有安装Prettier包，别的我不会用，配置文件.prettierrc.json中的规则不起作用，不知道为啥，不过不影响我们后面的操作。

如果有这样的提示说明项目没有安装Prettier包，在终端中执行安装命令

npm install --save-dev prettier

三、配置代码风格

1.保证vscode中有保存后格式化代码的设置（默认自动生成）

{
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

2.添加检查规则

rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 100, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
    //添加未定义变量错误提示。
    'no-undef': 'error'
  }

3. 测试
使用双引号后会有波浪线的提示，保存后自动变为单引号。