vscode + prettier 专治代码洁癖（一）

前言

相信不少小伙伴都纠结过本身代码的格式化问题，特别是团队协做的时候，加上前端语言种类繁杂，各类语法糖+团队我的的敲码习惯，会让你感受到一团糟。

在过往，咱们尝试过不少方式，从EditorConfig到各类***Lint, 还要研究各类配置，仍是没办法知足咱们的需求。 如今，prettier帮到你。

介绍

prettier是一个比较武断的格式化工具（官方介绍的逗比级翻译）。 我开始也是不能理解这个东西，由于已经习惯了捣鼓各类lint配置，总想着能弄一套真的适合本身团队风格习惯的配置出来， 结果就是一直在路上。

为何说prettier是武断的？ 它个各类lint工具不同，prettier只关注格式化，并不具备lint检查语法等能力，因此开始你们可能会常常碰到lint搭配prettier会出现冲突。并且prettier专断自行一套格式化风格，虽然提供配置，也只是配置少许的关键属性，能在必定程度上保证的代码的风格统一，并且使用门槛极低， 关键的他的风格并不丑，更容易让你们接受。

同时，prettier支持咱们大前端目前大部分语言处理，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown，这表明着， 你几乎能够用一个工具都能搞定全部的代码格式化问题。

怎么玩

其实prettier官网有提供各类使用的姿式，这里首先跟你们介绍咱们经常使用的vscode编辑器集成

• 插件

  首先安装vscode的插件prettier-vscode

  安装成功后，编辑器默认的格式化处理就会被prettier代替， 默认快捷键是alt + shift + f

• 配置

  插件安装成功后，编辑器的配置setting.json会出现prettier插件的相关配置节点，同时也能看到一些默认的配置信息。

  

  这里你能够针对我的或团队喜爱修改一些编辑器的全局配置，实际项目使用当中比较推荐用配置文件.prettierrc的方式进行针对性的配置，方便团队协做使用。 配置文件的选项能够参考官网：prettier.io/docs/en/con…

实例介绍

这里第一篇首先给你们演示一下vue + typescript + scss项目的相关配置

vue的vscode神级插件vetur这里就很少作介绍了，vetur的默认格式化工具也是使用的prettier，很是亲近。

• typescirpt, 这里仍然须要用到tslint 和 tslint-config-prettier配置

  $ yarn add -D tslint tslint tslint-config-prettier
  复制代码

  在项目根目录添加tslint.json, 这里使用官方推荐配置: tslint:recommended

  {
    "extend": ["tslint:recommended", "tslint-config-prettier"],
  }
  复制代码

  这样tslin-config-prettier就会想你原先lint配置里涉及到格式化话的配置覆盖重写，其余lint同理。

• scss, 这里须要用到stylelint和prettier-stylelint

  $ yanr add -D stylelint prettier-stylelint stylelint-config-ydj
  复制代码

  项目根目录添加stylint配置文件.stylelintrc.js

  module.exports = {
      extends: [
          'stylelint-config-ydj/scss', // your stylint config
          './node_modules/prettier-stylelint/config.js'
      ],
      rules: {
          'string-quotes': 'double'
      }
  };
  复制代码

• prettier配置

  项目级的配置，在项目根目录添加配置文件.prettierrc

  {
      "eslintIntegration": true,
      "stylelintIntegration": true,
      "tabWidth": 4,
      "singleQuote": true,
      "semi": false
  }
  复制代码

PS: 这里须要注意的点，目前vetur的template尚未格式化尚未很好的支持prettier，应该说目前官方只推荐使用js-beautify-html, 虽然说即将弃用，可是reshape集成尚未发布正式版，使用js-beautify-html+prettier插件的时候可能会致使template块没法格式化，咱们要在编辑器配置里面加入这段

// vetur configuration
"vetur.format.defaultFormatter.html": "js-beautify-html",

// prettier configuration
"prettier.disableLanguages": [
    "vue"
],
复制代码

最终效果演示

其余类型的项目和语言配置请期待下一篇！