Vue.js - 使用 ESLint + Prettier 整理程式码

在多人开发的时常常大家写 Code 的风格都不一样，这时候可以透过辅助工具来统一每个人的风格，当然自己开发时也可以用，尤其是像我这种写 Code 习惯很差的人XD，今天就来介绍如何使用 ESLint 与 Prettier 整理自己的程式码~

这边我们使用 VSCode 开发，首先安装 ESLint 与 Prettier 的插件

ESLint

ESLint 是一个检查 Coding Style 的工具，如果写法与设定不符则会跳出错误警告，比较常见的规範有 Airbnb、Standard、Google，当然也可依照文件自订规则

Prettier

Prettier 是程式码格式化工具，VSCode 预设可使用 Alt + Shift + F 格式化程式码，而我们可以套用自己的 Prettier 设定，并将其设定为存档时自动格式化，这样就会方便很多哦

专案使用 ESLint + Prettier

ESLint 与 Prettier 一起使用时有各自负责的部分，ESLint 负责订定 Coding Style 与检查，而 Prettier 则负责将 Code 格式化排整齐，以下介绍一下安装方式

Vue CLI

目前的 Vue CLI 有整合 ESLint + Prettier，因此选择之后即安装完成




安装完成后开启根目录的 .eslintrc.js 档案，这时候可以看到里面的设定如下

// .eslintrc.jsmodule.exports = {  // ...  extends: [    "plugin:vue/essential", // 使用 essential 规範    "eslint:recommended", // 使用 ESLint 推荐规範    "@vue/prettier" //使用 prettier  ],  // ...};

其中 plugin:vue/essential 是 eslint-plugin-vue 的功能，他提供我们对 Vue 写法的建议，顺序由宽鬆到严谨有以下四种，可依喜好自行调整

{  "extends": "plugin:vue/base",  "extends": "plugin:vue/essential",  "extends": "plugin:vue/strongly-recommended",  "extends": "plugin:vue/recommended"}

新增专案&修改专案

若旧有的专案需要添加 ESLint 与 Prettier 则须先安装以下套件

$ npm install eslint babel-eslint eslint-plugin-vue --save-dev$ npm install prettier @vue/eslint-config-prettier eslint-plugin-prettier --save-dev

eslint: ESLint 本体
babel-eslint: 让 ESLint 兼容 ES6
eslint-plugin-vue: 提供 Vue Style Guide
prettier: Prettier 本体
@vue/eslint-config-prettier: 整合 ESLint 与 Prettier 的规则
eslint-plugin-prettier: 整合 ESLint 与 Prettier 的规则

安装完成后在根目录新增 .eslintrc.js 档案并依照上方设定即可，同样可自行调整需要规範

// .eslintrc.jsmodule.exports = {  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],  parserOptions: {    parser: "babel-eslint"  }};

其他设定

安装好后我们会做一些客製化的设定来让开发更快速一些

VSCode 自动排版

这边将预设格式化排版方式替换成 Prettier，所以需要于 VSCode 添加以下设定

// settings.json{  "files.autoSave": "onWindowChange", // 切换视窗自动存档  "editor.formatOnSave": true, // 存档时自动 format  "vetur.validation.template": false, // 关闭 vetur 验证  "editor.defaultFormatter": "esbenp.prettier-vscode" // 预设 format 使用 prettier}

使用指令排版

如果不想使用 VSCode 的自动排版也可以在 package.json 内增加指令，因为单引号解读会出错，所以这边使用 \" 的方式，设定好之后只要执行 npm run format 就会将所有 js、vue、scss 档案进行格式化啰!

// package.json{  "scripts": {    "format": "prettier --write \"src/**/*.{js,vue,scss}\""  }}

设定 Prettier

官方 提供几种配置档供选择，这边使用 js 档案进行设定，只要在根目录创建 .prettierrc.js 并写入设定就可以啰，至于设定规则可以参考这里

// .prettierrc.jsmodule.exports = {  semi: false,  singleQuote: true,  arrowParens: "avoid"};

设定 ESLint

ESLint 可以在刚刚新增的 .eslintrc.js 内的 rules 设定，详细规则可以看这里

// .eslintrc.jsmodule.exports = {  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],  parserOptions: {    parser: "babel-eslint"  },  rules: {    semi: ["error", "always"],    "no-console": "off"  }};

P.S.其实不只是 ESLint，Vue Style Guide 也可以在这里设定，详细可以自己研究这里

结语

使用 ESLint + Prettier + 自动排版真的很猛阿，完全不用管阿哩阿杂的，只要存档就自己排好了，不过不推荐新手用就是了，这样以后没有工具就会写得很乱XD，不过我还是认为在团队上统一程式码这是必不可少的好东西，那就祝大家 format 愉快拉!

---

补充

最近用起来发现，多人协作时用 Prettier 设定上有些不方便，所以单用了 ESLint 来做排版，在此补上设定

同上面一样须在 VSCode 内安装 ESLint 的插件开 vue 专案时可选择 Airbnb 或是 Standard 来做之后客製化的修改，这边选 Standard
ESLint 会询问是否遵照专案内的设定档，选择 Allow
接着在 VSCode 设定内找到工作区做设定，把设定存在专案(工作区)可切开每个专案不同的设定，才不会每换专案就一直改设定，设定如下可在存档时自动检查并修正

// settings.json{  "editor.codeActionsOnSave": {    "source.fixAll.eslint": true  },}

若没有依照步骤二选择 ESLint 则须另外加入以下设定

// settings.json{  // eslint 支援 vue  "eslint.validate": [    "javascript",    "vue"  ],  // 关闭 vetur 验证  "vetur.validation.template": false}

预设 .eslintrc.js 设定如下，这边小弟一样推荐使用 recommended 规範，并在 rules 加入客製化的规範就大功告成了~

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