前端团队项目规范系列：（一）环境配置

一、拷贝团队用脚手架

二、集成 EditorConfig 配置

去插件市场下载插件 EditorConfig for VS Code

三、集成 Prettier 配置

安装 Prettier，并下载插件 Prettier - Code formatter

npm i prettier -D

四、集成 ESLint 配置

1.安装 ESLint ，并下载插件ESLint

2.配置 ESLint ， ESLint 安装成功后，执行 npx eslint --init，然后按照终端操作提示完成一系列设置来创建配置文件。

• How would you like to use ESLint? （你想如何使用 ESLint?）我们这里选择 To check syntax, find problems, and enforce code style（检查语法、发现问题并强制执行代码风格）

• What type of modules does your project use?（你的项目使用哪种类型的模块?）我们这里选择 JavaScript modules (import/export)

• Which framework does your project use? （你的项目使用哪种框架?）我们这里选择 Vue.js

• Does your project use TypeScript?（你的项目是否使用 TypeScript？）我们这里选择 No

• Where does your code run?（你的代码在哪里运行?）我们这里选择 Browser 和 Node（按空格键进行选择，选完按回车键确定）

• How would you like to define a style for your project?（你想怎样为你的项目定义风格？）我们这里选择 Use a popular style guide（使用一种流行的风格指南）

• Which style guide do you want to follow?（你想遵循哪一种风格指南?）我们这里选择 Airbnb: [github.com/airbnb/java…]

• What format do you want your config file to be in?（你希望你的配置文件是什么格式?）我们这里选择 JavaScript

• Would you like to install them now with npm?（你想现在就用 NPM 安装它们吗?）根据上面的选择，ESLint 会自动去查找缺失的依赖，我们这里选择 Yes，使用 NPM 下载安装这些依赖包。

注意：如果自动安装依赖失败，那么需要手动安装npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue -D

五、解决 Prettier 和 ESLint 的冲突

• 安装插件 npm i eslint-plugin-prettier eslint-config-prettier -D