First of all, install Prettier extension: "Pettier - Code formatter".

The open the VSCode setting:

cmd + ,

Search for "format": and enable "Format On Save"

Add .prettierrc file:

{
"tabWidth": ,
"semi": true,
"singleQuote": true
}

Add .prettierignore file:

dist
package-lock.json

Also you might want to make sure Prettier use eslint rules as well, not just ingore eslint rules we already setup:

install:

npm install --save-dev eslint-config-prettier
// .eslintrc

{
"extends": ["eslint:recommended", "prettier"]
}

Add both file into global gitignore:

touch ~/.gitignore_global // create one if you don't have it

vim ~/.gitignore_global // edit it

//add
.prettierrc
.prettierignore // Run
git config --global core.excludesfile ~/.gitignore_global

[Tool] Enable Prettier in VSCode as Format on Save and add config files to gitingore的更多相关文章

  1. vs code的使用(一) Format On Paste/Format On Save/ Format On Type

    很多经典的问题可以搜索出来,但是一些很小的问题网上却没有答案 (这是最令人发狂的,这么简单,网上居然连个相关的信息都没有给出) (就比如我想保存后自动格式化,但网上的大部分都是如何取消保存后自动格式化 ...

  2. eslint+prettier 的 VSCode配置项

    { "files.autoSave": "off", "editor.fontSize": 12, "terminal.integ ...

  3. Using Tensorflow SavedModel Format to Save and Do Predictions

    We are now trying to deploy our Deep Learning model onto Google Cloud. It is required to use Google ...

  4. vscode 中 eslint prettier 和 eslint -loader 配置关系

    前置 本文将探究 vscode prettier 插件 和 eslint 插件在 vscode 中的配置以及这两者对应的在项目中的配置文件的关系,最后提及 vscode eslint 插件配置与 es ...

  5. VSCode中使用vue项目ESlint验证配置

    如果在一个大型项目中会有多个人一起去开发,为了使每个人写的代码格式都保持一致,就需要借助软件去帮我们保存文件的时候,自己格式化代码 解决办法:vscode软件下载一个ESLint,在到设置里面找到se ...

  6. vscode编辑器自定义配置

    { //删除文件确认 "explorer.confirmDelete": false, // 主题 "workbench.iconTheme": "v ...

  7. vscode编辑器

    插件 Auto Close Tag   自动关闭标签 Auto Rename Tag 自动修改标签 Bracket Pair Colorizer  多层括号不同颜色显示 EditorConfig fo ...

  8. Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南

    Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多 ...

  9. VSCode插件及用户设置

    第一部分:插件 VSCode内置"emmet"插件,"convert to utf-8"等插件效果!十分强大!代码提示功能特别强悍! 插件地址:点击此处! 推荐 ...

随机推荐

  1. JTAG Communications model

    https://en.wikipedia.org/wiki/Joint_Test_Action_Group In JTAG, devices expose one or more test acces ...

  2. VGA Signal Timing

    VGA Signal Timing 640 x 350 VGA 640x350@70 Hz (pixel clock 25.175 MHz) VESA 640x350@85 Hz (pixel clo ...

  3. Understanding the STM32F0's GPIO

    Understanding the STM32F0's GPIO This is the first part of the GPIO tutorial for the STM32F0Discover ...

  4. asp.net MVC 中 Session统一验证的方法

    验证登录状态的方法有:1  进程外Session   2 方法过滤器(建一个类继承ActionFilterAttribute)然后给需要验证的方法或控制器加特性标签 3 :新建一个BaseContro ...

  5. TCPIP网络协议层对应的RFC文档

    原文地址:TCPIP网络协议层对应的RFC文档作者:西木 RFC - Request For Comments 请求注解 TCP/IP层 网络协议 RFC文档 Physical Layer Data ...

  6. Apache Kafka —一个不同的消息系统

    Apache已经发布了Kafka 0.8,也是自从成为Apache软件基金会的顶级项目后Kafka的 第一个主版本. Apache Kafka是发布—订阅消息传递,实现了分布式提交日志,适用于离线和在 ...

  7. Revit MEP API连接器类别

    连接器的类别,风管不仅有两端,可能在曲线上也有. ;         ;         ;         ;             Connector conn = csi.Current ; ...

  8. AngularJS使用ngMessages进行表单验证

    名称为"ngMessages"的module,通过npm install angular-messages进行安装.在没有使用ngMessages之前,我们可能这样写验证: < ...

  9. NSZombie 详解 -僵尸对象

    1.什么是僵尸对象? 简而言之,就是过度释放的对象. 2.僵尸对象有什么特点? 如果一个对象a被变成了僵尸对象,那么,在进行下面的判断时,a是会被系统当成一个对象来进行判断的.但是,如果你使用a进行其 ...

  10. UITabBarController 详解之 hidesBottomBarWhenPushed的正确用法

    今天说的是在TabBar嵌套Nav时,进行Push的时候隐藏TabBar的问题. 之前项目也需要这么做,那时候iOS7还没出,也是各种搜罗,后来的解决方法是当push操作的时候自己隐藏Tabbar,p ...