# vue2-template

**Repository Path**: codercjx/vue2-template

## Basic Information

- **Project Name**: vue2-template
- **Description**: vue2 项目模板，项目依赖eslint + prettier
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-07
- **Last Updated**: 2021-09-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue2-template

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
```

### Compiles and minifies for production

```
npm run build
```

### Lints and fixes files

```
npm run lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

## 一、项目简介

### 1.1 vue-cli 脚手架版本：4.5.13

### 1.2 使用 less

### 1.3 代码检查风格：选择 eslint + prettier

## 二、代码规范及配置文件

### 2.1 .editorconfig 配置文件

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格
在 github 上 vue 的仓库中就有 .editorconfig 文件，我们可以把 vue 的这个文件复制过来用

### 2.2 prettier 工具

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具

- 安装 prettier 第三方库
- package.json 文件 配置 "prettier": "prettier --write ." 脚本命令，可执行脚本命令让项目中的所有文件通过 prettier 工具格式化代码
- .prettierrc 文件 格式化配置
- .prettierignore 忽略 格式化的文件

### 2.3 修改.prettierrc 中的格式化风格 怎么兼容 eslint 检查风格

刚刚使用了 prettire 对代码格式化，但是格式化后的代码可能和 eslint 规范冲突了（比如：配置和格式化后代码单引号，但是 eslint 规范要 双引号）。那怎么解决这种冲突呢？

- 安装 eslint-plugin-prettier 和 eslint-config-prettier。如果创建项目选择了 eslint + prettirer 会自动安装 这两个包
- .eslintrc.js 文件中继承 plugin:prettier/recommended。当 eslint 规范和 prettier 格式化后的代码 冲突时，遵循 prettier 格式，eslint 就不会报警告了