1. 首页
  2. 工具类
  3. Visual Studio Code

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插件的相关配置节点,同时也能看到一些默认的配置信息。

    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 }

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区,你想要的,在这里都能找到

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 专治代码洁癖(一)

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

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文来源于网络,其版权属原作者所有,如有侵权,请与小编联系,谢谢!

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

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

链接:https://www.javascriptc.com/2040.html

原文链接:https://juejin.im/post/5a791d566fb9a0634853400e

« 能让你开发效率翻倍的 VSCode 插件配置(上)
Dive Into Code: VSCode 源码阅读(一)»
Flutter 中文教程资源

相关推荐

QR code