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. LPC43xx OTP

  2. USBDM RS08/HCS08/HCS12/Coldfire V1,2,3,4/DSC/Kinetis Debugger and Programmer -- MC9S08JM16/32/60

    Introduction The attached files provide a port of a combined TBDML/OSBDM/TBLCF code to a MC9S08JM16/ ...

  3. JVM菜鸟进阶高手之路

    http://www.jianshu.com/u/3def157aab07?utm_medium=note-author-link&utm_source=mobile

  4. STM32F103 TIM3定时器初始化程序

    //TIM3 分频 #define TIM3_DIV1 (1-1) #define TIM3_DIV18 (18-1) #define TIM3_DIV72 (72-1) //************ ...

  5. [Winform]通过钩子监控键盘操作和鼠标移动

    摘要 有这样一个需求,在程序隐藏之后,需要监控当前电脑是否有操作,如果1分钟内,无操作,则弹出视频,循环播放. 解决办法 从网上找的一个解决办法,可以通过钩子的方式实现,这里记录一下. /// < ...

  6. Delphi开发环境中应用层网络协议的实现

    已经进入Internet网络时代了,许多新出的软件都拥有网络功能.其实,在这些软件背后所依靠的技术基础就是一系列的Inernet网络协议标准,亦即TCP/IP系列协议. 下面本人简要介绍一下在Delp ...

  7. FreeCommander 学习手册

    概述 转载请注明出处:http://www.cnblogs.com/skywang12345/p/3470728.html FreeCommander(下文简称FC),是Windows下面比较强大的文 ...

  8. ​0​天​掌​握​i​O​S​开​发​之​D​a​y​2​ ​-​ ​内​存​管​理 (给学生讲解的课件,总结的不错)

    from:   10​天​掌​握​i​O​S​开​发​之​D​a​y​2​ ​-​ ​内​存​管​理

  9. Android中的Audio播放:竞争Audio之Audio Focus的应用

    from://http://blog.csdn.net/thl789/article/details/7422931 Android是多任务系统,Audio系统是竞争资源.Android2.2之前,没 ...

  10. 【转】比较init-method,afterPropertiesSet和BeanPostProcessor

    一.简单介绍 1.init-method方法,初始化bean的时候执行,可以针对某个具体的bean进行配置.init-method需要在applicationContext.xml配置文档中bean的 ...