搭建规范化的vue2项目

lydxwj

已于 2024-07-27 13:44:18 修改

阅读量505

点赞数 19

分类专栏： vue 文章标签： vue Eslint Prettier

于 2024-07-27 10:06:49 首次发布

本文链接：https://blog.csdn.net/lydxwj/article/details/140731025

版权

vue 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

项目包含的库

Vue2+Vuex+Router+Eslint+Prettier

环境

eslint：7.32.0

prettier：2.4.1

eslint-plugin-prettier：4.0.0

eslint-plugin-vue：8.0.3

@vue/cli：5.0.8

步骤

全局安装cli工具
```
npm install -g @vue/cli
```
运行创建项目命令
```
vue ui
```
运行 vue create xxx 也可以，这种是在命令行中选择配置项，上面那个是在网页中点击选择

之前创建过项目的一般默认会进入之前的项目仪表盘，点击项目名下拉框-选择Vue 项目管理器-创建（或者在页面左下角有个小的房子icon-创建）

建议在想要创建项目的目录下运行上面命令，这样（之前没使用过cli创建项目）默认会是当前的目录

尽量不要切换盘符或者进入很多目录的路径，会出现进入失败情况
选择配置项

选择好目录之后，点击下方的在此创建新项目

详情
- 填写项目名，例如：vue-standard
- 包管理器选择，例如：npm（按照自己习惯选择）
- 若目标文件夹已存在则将其覆盖，不建议打开，容易出现问题
- 无新手指引的脚手架项目，随意配置
- 初始化 git 仓库 (建议) ，一般是打开的（因为项目管理基本都是使用git的，会进行git初始化）
  - 提交信息，进行提交信息的覆盖，可以根据团队提交信息规范填写，没有规范就按照自己习惯填写，例如：chore: init
- 点击下一步
预设
- 一般选择手动，自己进行个性化配置设置
- 点击下一步
功能
- Babel，这个基本不存在不选择的情况
- TypeScript，建议vue3项目选择（不熟悉也可以不选择），vue2项目一般不选择（对TS支持不够好）
- Progressive Web App (PWA) Support，使用web平台技术构建的应用程序，一般是不选择的
- Router，一般情况下选择，如果不使用路由的可以不选择
- Vuex，根据项目需求选择，需要共享状态的项目会选择
- CSS Pre-processors，一般情况下选择，想要使用Sass、Less、Stylus，一定要选择
- Linter / Formatter，代码校验格式化配置，本案例就是要搭建规范化项目，所以这个一定是勾选的，一般情况下也是建议选择的
- Unit Testing，这个根据需要，敏捷开发一般是不选择的，想要项目健壮并且有时间编写单元测试的可以选择
- E2E Testing，这个也是用来测试，敏捷开发一般是不选择的，想要项目健壮并且有时间编写测试代码的可以选择
- 使用配置文件，一般是选择的，不然所有配置会放到package.json里面
- 点击下一步
案例选择

配置
- Choose a version of Vue.js that you want to start the project with，选择vue版本，本案例选择的2.X，这个根据团队或个人技术栈来选择
- Use history mode for router?，这个根据喜好和需求进行选择，路由是否带有#
- Pick a CSS pre-processor:，这个根据UI库和个人喜好选择，一般选择UI库使用的，ElementUI使用Sass，例如：Sass/SCSS (with dart-sass)
- Pick a linter / formatter config:，建议选择ESLint + Prettier，也可以根据喜好选择其他的规范，不想要复杂校验也可以选择ESLint with error prevention only
- Pick additional lint features:
  - Lint on save，一般是选择的（规范化项目），保存时进行校验
  - Lint and fix on commit，这个根据需要选择，git提交代码时校验，打开后格式有问题时无法提交代码
  - 点击创建项目
- 预设名，有预设下次同样配置可以直接选择预设
完成创建
- 按照上面步骤操作之后，只需要等待项目创建完成即可，建议不在页面中进行依赖插件添加，防止使用时出现编写错误（如果你非常熟练可以忽略此建议），找到依赖官网按照步骤操作能减少错误
- 完成创建之后进入项目仪表盘，配置菜单中会有vue和eslint的相关配值页面，可以进行个性化修改（本案例未做修改）
完善配置
- 修改 .eslintrc.js配置文件，完善规则使用自己或团队习惯的规则
- 增加 .prettierrc.js配置文件，修改prettier相关规则
- 增加.eslintignore配置文件，设置那些文件不需要eslint校验
- 增加.prettierignore配置文件，设置那些文件不需要prettier校验
- 增加.vscode/settings.json文件，设置VsCode更加方便开发，没有这个文件可以点击管理（左下角的轮子icon）-设置-工作区-打开设置（json）（右上角弯曲箭头+纸张的icon）就会自动新建出来文件，设置一些保存自动修改等配置
  
  .gitignore文件中设置忽略了.vscode，要想提交修改，需要删除
- VsCode插件安装：ESLint、Prettier - Code formatter、Vue - Official
详细案例配置请查看文末案例项目地址

遇到问题

1. 感觉eslint配置文件没有使用已安装依赖中的eslint-plugin-vue、eslint-plugin-prettier，或者是配置与其他博文不一样

原来文件内容.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

一些博文配置

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  plugins: [
     "vue",
      "prettier",
  ],
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

上面这样的是完全错误的，不要照着进行修改（不要问我为什么知道的o(╥﹏╥)o）

实际上，原项目中extends中的plugin:vue/essential相当于做了如下配置

module.exports = {
  parser: require.resolve('vue-eslint-parser'),
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module'
  },
  env: {
    browser: true,
    es6: true
  },
  plugins: ['vue'],
  rules: {
    ... // 这里省略很多规则配置
  }
}

原项目中extends中的plugin:prettier/recommended相当于做了如下配置

module.exports = {
  extends: ['prettier'],
  plugins: ['prettier'],
  rules: {
    ... // 这里省略很多规则配置
  }
}

所以完全没有必要修改！！！

2. VsCode中template上面使用v-for报错，不能在template上设置key

vue2的项目要求template上面使用v-for时，要在template上面设置key，但是vue3中这个要求确实反的，要像解决这个问题，安装Vetur插件，不安装或者禁用Vue - Official

3. VsCode没有在不符合规范的代码位置标红，已经安装Eslint插件

正常情况下，打开vue文件，右下角vue左边有个{}图标（没有这个图标，可以右键-勾选编辑器语言状态），鼠标移上去不显示Eslint就是有问题，解决办法是升级VsCode编辑器，1.91.1版本是可以的

4. Eslint修复之后，保存之后又变回去（VsCode配置保存自动修复），VsCode还是标红

这种原因是eslint和prettier规则冲突：例如：prettier的singleQuote与eslint的quotes配置这两个都是关于引号的配置，如果一个要求单引号，一个要求双引号，这样就会出现问题

另一个原因是修改了规则，没有重启VsCode

5. 配置的eslint或者prettier规则没有生效

出现这种情况的原因是：配置的值错误；另一个原因是修改了规则，没有重启VsCode

配置的值错误，例如：.eslintrc.js中"quotes": “double”，这个时候保存会出现右下角vue左边有个{}图标多了一个x，或者单独把Eslint添加到状态栏会看到Eslint变红了，点击会看到报错内容，Configuration for rule “quotes” is invalid:Severity should be one of the following: 0 = off, 1 = warn, 2 = error (you passed ‘“double”’)，想要设置这个需要两个值，这个时候需要是数组，“quotes”: [“error”, “double”]

prettier的规则trailingComma: “es5111”，这个时候保存出现右下角Prettier变红，点击可以看到Invalid trailingComma value. Expected “all”, “es5” or “none”, but received “es5111”，人家要求的是es5，trailingComma: “es5”