技术原理

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

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

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

ESLint

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

Prettier

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

专案使用 ESLint + Prettier

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

Vue CLI

目前的 Vue CLI 有整合 ESLint + Prettier,因此选择之后即安装完成
选择 Linter/Formatter
选择 ESLint + Prettier
选择 Lint on save
选择 ESLint 设定方式
安装完成后开启根目录的 .eslintrc.js 档案,这时候可以看到里面的设定如下

// .eslintrc.js

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

其中 plugin:vue/essentialeslint-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.js

module.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 就会将所有 jsvuescss 档案进行格式化啰!

// package.json

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

设定 Prettier

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

// .prettierrc.js

module.exports = {
  semi: false,
  singleQuote: true,
  arrowParens: "avoid"
};

设定 ESLint

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

// .eslintrc.js

module.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 愉快拉!

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片
人工智能板块股票分析 投稿者
我还没有学会写个人说明!
最近文章
  • * 没有更多文章了
  • 热门搜索

    分类目录