likes
comments
collection
share

vscode + prettier 专治代码洁癖(一)

作者站长头像
站长
· 阅读数 15

前言

相信很多小伙伴都纠结过自己代码的格式化问题,特别是团队协作的时候,加上前端语言种类繁杂,各种语法糖+团队个人的敲码习惯,会让你感觉到一团糟。

在过往,我们尝试过很多方式,从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插件的相关配置节点,同时也能看到一些默认的配置信息。

    vscode + prettier 专治代码洁癖(一)

    这里你可以针对个人或团队喜好修改一些编辑器的全局配置,实际项目使用当中比较推荐用配置文件.prettierrc的方式进行针对性的配置,方便团队协作使用。 配置文件的选项可以参考官网:prettier.io/docs/en/con…

实例介绍

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

vue的vscode神级插件vetur这里就不多做介绍了,vetur的默认格式化工具也是使用的prettier,非常亲近。

  • typescirpt, 这里仍然需要用到tslinttslint-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, 这里需要用到stylelintprettier-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"
],

最终效果演示

vscode + prettier 专治代码洁癖(一)

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