团队开发的代码风格

开发同一个项目的团队，每个成员的代码风格都应该一致。

例如：

① JS 中的字符串，统一使用单引号表示

② 代码缩进，统一使用两个空格

③ 不允许出现 >2 个的连续空行

④ 语句结束，必须加分号

⑤ ......

注意，上述规则不是固定的。只是举例说明，比如我公司的项目，就要求语句结束加分号，也可以的。

只是说，一个团队的代码风格要统一而已。

如何保证代码风格统一

使用ESLint代码检查工具。

使用ESlint后，就会强制程序员使用规定的代码风格进行开发。

如果违反了规则，代码就会报错。

什么是 ESLint

官方概念：ESLint 是可组装的 JavaScript 和 JSX 检查工具。

通俗理解：一个工具，用来约束团队成员的代码风格。

官方网站：ESLint - 插件化的 JavaScript 代码检测工具 - ESLint中文文档ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 能够帮你轻松写出高质量的 JavaScript 代码https://eslint.bootcss.com/

ESLint有什么好处

保证团队协作开发时，编写出来的代码风格保持一致。

项目中如何使用ESLint检查代码风格

当通过 @vue/cli 脚手架工具安装项目后，默认已经将eslint安装并配置好了。

我们将使用 vue的eslint插件规定的默认规则 进行代码检查，注意不是eslint官方的默认规则。

如果需要修改规则，则可以查看官方网站。

演示如何配置ESlint

下面演示的两个配置，必须配置。和后面的vscode设置有关。

关于ESLint的配置，需要放到配置文件中。

关于ESLint的配置文件，官方有详细的说明，当然很详细（Luo Suo）

对于一个项目，ESLint的配置项：

要么放到跟目录的 .eslintrc.js中；如果你用的 @vue/[email protected] 创建的项目就是这样的
要么放到根目录的 package.json 中的 eslintConfig节点中；如果你用的是 @vue/cli5.0.x 创建的项目就是这样的

无论是上述那个文件文件，我们找到里面的 rules 节点，这个 rules节点，就是配置ESLint规则的

比如，我们配置每条语句结束，不能加分号，则需要在 rules节点中加入如下规则：

"rules": {
  "semi": ["error", "never"]
}

修改了配置文件，需要重启项目（终端窗口要重新 npm run serve）

比如，配置“函数名”和“小括号”之间是否需要加空格，则需要在rules节点加入如下规则：

"rules": {
  "space-before-function-paren": [
    "error",
    {
      "anonymous": "always",
      "named": "never",
      "asyncArrow": "always"
    }
  ]
}

修改了配置文件，需要重启项目（终端窗口要重新 npm run serve）

上述规则的解释：

"anonymous": "always"     匿名函数小括号前，需要空格。比如 setTimeout(function () {})
"named": "never"          有名字的方法，不需要空格。比如 abc() {}
"asyncArrow": "always"    箭头函数，需要空格。比如 aaaa(async data => {})

测试

打开 src/App.vue，在JS代码中，随便一个语句结束的位置，加一个分号试试，看终端或浏览器是否有报错提示。

import HelloWorld from './components/HelloWorld.vue'
let a = 2
console.log(a); // 这里加了一个分号

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods: {
    add() {}
  }
}

去掉代码中的分号，再试试。

这样，以后再写代码，大家就必须使用一致的代码风格了。

vscode插件配置

需要安装和卸载的插件
1. 需要卸载的插件
        ○JS-CSS-HTML Formatter
        ○Beautify
        ○还有其他格式化代码的插件

卸载是为了为了避免冲突

2. 需要安装的插件

路径补全插件，vue中使用
- Path Intellisense
- Path Intellisense - Visual Studio Marketplace
- 代码格式化插件（自动调整代码格式的）
  Prettier - Code formatter
  Prettier - Code formatter - Visual Studio Marketplace
- Vue语法提示插件（自动补全vue语法的）
  Vue 3 Snippets
- Vue 3 Snippets - Visual Studio Marketplace
- ElementUI代码补全插件（后面用到的一个组件库）
  Element UI Snippets
- Element UI Snippets - Visual Studio Marketplace
- 代码格式检查工具（很重要）
  ESLint
  ESLint - Visual Studio Marketplace
- Vue语法格式化插件，vue文件代码高亮插件
  Vetur
  Vetur - Visual Studio Marketplace

插件安装小结

如果你自己明白你的插件是干什么的，你就把上述插件安装了即可
如果你自己不明白自己的插件是干什么的了，那就把插件都卸载了，安装如下图所示的插件即可

为什么需要安装ESLint插件

前面的项目已经使用ESLint检查我们的代码了。

但是，写代码的时候，难免会“写错”，并不是真的写错代码，只是不符合项目的规定。

这种“写错”，vscode并没有提示。

安装vscode的ESlint插件后，当我们“写错”代码的时候，vscode会给我们提示。

插件安装后，需要配置。关于配置，详见后面的vscode插件配置

为什么需要Prettier格式化代码插件

格式化代码，就是把 格式不好的代码，自动转成 符合要求的格式。

而 Prettier 插件，可以和 ESLint 配合到一起。

也就是说，使用 Prettier 格式化后的代码，刚好是符合ESlint要求的。

插件安装后，需要配置。关于配置，详见后面的vscode插件配置

配置ESlint和Prettier插件

注意，这里配置ESlint，指的是配置vscode的一个叫做ESlint的插件。

打开vscode设置（快捷键 Ctrl + ,），即可打开vscode设置界面。

点击设置界面右上角的 “打开设置(json)”图标：

打开后，你会看到结构如下的代码：

注意，只是结构一样，由于大家的vscode设置各有千秋，所以代码并不一定一样。

{
    // =====================================================
    // 一会将代码复制到这里
    // =====================================================
    "workbench.iconTheme": "helium-icon-theme",
    "workbench.colorTheme": "laotang dark",
    "files.autoSave": "onFocusChange",
    "editor.fontFamily": "Menlo, 'Fira Code', 'FuraMono NF', Monaco, monospace, 'Courier New'",
    "editor.formatOnPaste": true,
    "editor.minimap.enabled": false,
    "[markdown]": {
        "editor.quickSuggestions": true
    }
}

将下面的配置代码，复制到上述指定的位置。

// prettier 的配置文件存放路径
"prettier.configPath": "C:\\Users\\xiafan\\.prettierrc",
// ---------------------------------------
// 路径提示
"path-intellisense.mappings": {
  "@": "${workspaceRoot}/src"
},
// ---------------------------------------
// 开启编辑器的保存自动格式化功能
"editor.formatOnSave": true,
// ESLint 插件的配置
"editor.codeActionsOnSave": {
  "source.fixAll": true
},
"eslint.alwaysShowStatus": true,
// ---------------------------------------
// 每行文字个数超出此限制将会被迫换行
"prettier.printWidth": 100,
// 使用单引号替换双引号
"prettier.singleQuote": true,
"prettier.arrowParens": "avoid",
"prettier.trailingComma": "none",
"prettier.semi": false,
// ---------------------------------------
// 设置 .vue 文件中，HTML代码的格式化插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 忽略警告信息
"vetur.ignoreProjectWarning": true,
// 防止自动导入
"vetur.completion.autoImport": false,
// 不验证 .vue 组件的模板结构
"vetur.validation.template": false,
// vetur 默认的格式化配置项
"vetur.format.defaultFormatterOptions": {
  "prettier": {
    "trailingComma": "none",
    "semi": false,
    "singleQuote": true,
    "arrowParens": "avoid",
    "printWidth": 100
  },
  "js-beautify-html": {
    "wrap_attributes": false
  }
},
// ---------------------------------------
"[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
  "editor.defaultFormatter": "vscode.html-language-features"
},
"[css]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.tabSize": 2,

复制后，如果有重复的配置项，是保留原来的配置项，还是删除看具体配置自行决定

配置 Prettier

下载配置文件

下载如下文件：

百度网盘链接：https://pan.baidu.com/s/1evelaVPEu0QWA9Rf1G_g-w
提取码：lusj

解压后，得到 .prettierrc 。

放到指定的位置

Windows系统，将 .prettierrc 文件，放到 C:/Users/你的用户名 文件夹（Users就是用户）。
Mac系统，.prettierrc文件是一个隐藏文件，需要按Command + Shift + .显示隐藏文件，然后打开访达，点击顶部菜单栏的前往，打开个人（画小房子图标）文件夹，将.prettierrc复制到个人文件夹。

修改vscode设置

修改vscode的配置文件，将配置中的第一条配置的路径修改一下

Windows系统修改为 "prettier.configPath": "C:\\Users\\LaoTang\\.prettierrc"
Mac系统修改为 "prettier.configPath": "~/.prettierrc"

示例如下：

配置默认的格式化程序

配置JS文件和VUE文件的默认格式化程序

打开任意一个JS文件，鼠标右键，选择“使用...格式化”，在出现的菜单中，选择“配置默认的格式化程序”，选择“Prettier - Code formatter”

打开任意一个VUE文件，鼠标右键，选择“使用...格式化”，在出现的菜单中，选择“配置默认的格式化程序”，选择“Prettier - Code formatter”

测试

这样配置后。

当我们写代码的时候，如果代码格式不符合ESLint的要求，就会提示错误；

当我们保存代码的时候，如果有不符合ESLint要求的代码，Prettier 插件会自动将代码格式化成符合要求的

大家可以自行测试。

ESLint 团队开发的代码风格与配置