VSCode ESLint Prettier 自动格式化

使用vs code 终端打开当前工作空间目录。

1. 安装 prettier，可以选择本地安装 或者全局安装(尽量安装在本地工作空间)

    node_modules 的安装方式尽量选择 yarn ，速度比最新的npm 要快。

    yarn add prettier -D

2. 安装 ESLint

    yarn add eslint -D

3.vscode 打开插件市场分别安装 eslint 和 prettier 两款插件。这两款插件能尽量保证插件的正常启动

安装完毕之后，使用vscode 快捷键创建 ctrl + shift +p (command +shift +p) 

输入 eslint ，选择创建eslint 配置(下图第二个)

eslint

提示会要求根据你的喜好配置eslint 的检查规则。根据习惯配置 https://eslint.org/docs/rules/。创建好之后 在 .eslintrc 文件中找到 plugins,在数组中加入 "prettier"

配置完之后我们继续配置prettier 和 eslint 的方法一致 vs code快捷输入 ctrl + shift +p 输入 prettier 并选择路径。就会生成一个默认的prettier 配置，然后根据自己的需求修改格式化规则。

4. 在workspace 中建立 .vscode 的文件夹 并在目录下添加 settings.json 文件。

    编辑文件在最后添加 "editor.formatOnSave": true

    保存当前的配置。然后重启vs code，自动格式话就会正常工作了。

常见问题

    如果自动格式化不能正常工作，先打开vs code 终端中output 对应的 eslint 和 prettier 寻找答案 详细阅读应该都能解决。 

遇此问题    Failed to load plugin 'prettier' declared in 'CLIOptions': Cannot find module 'eslint-plugin-prettier'，请将package.json 中的 eslint 的版本 设置在 5.4.0  就可以解决。详情见：https://github.com/prettier/prettier-atom/issues/505