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. 阿里云esc云服务器IP不能访问的解决办法

    问题:阿里云服务器,专有网络,web设置完毕,在服务器中localhost能够访问,并且关闭防火墙,但是使用公网ip无法访问. 解决:找到本实例安全组,配置规则,按照要求填入80或其他端口.配置完成后 ...

  2. 【Go命令教程】8. go test

    go test 命令用于对 Go 语言编写的程序进行测试.这种测试是以 代码包 为单位的.当然,这还需要测试源码文件的帮助.关于怎样编写并写好 Go 程序测试代码,我们会在本章的第二节加以详述.在这里 ...

  3. 利用进程ID获取主线程ID

    利用进程ID获取主线程ID,仅适用于单线程.多线程应区分哪个是主线程,区分方法待验证 (1)好像可以用StartTime最早的,不过通过线程执行时间不一定可靠,要是在最开始就CreateThread了 ...

  4. Tomcat 负载均衡 及Session共享

    原文:https://www.sunjianhua.cn/archives/tomcat-high-availability.html 一.安装java环境 二.安装tomcat(apache-tom ...

  5. C#编程(六十三)----------并行LINQ

    并行LINQ .NET4在System.Linq命名空间中包含一个新类ParallelEnumerable,可以分解查询的工作使其分布在多个线程上.尽管Enumerable类给IEnumerable& ...

  6. 【IntelliJ IDEA】idea或者JetBrains公司所有编辑器,设置其软件的字体样式

    操作如下: 修改完成后的效果: 可以看到修改以后的ide的效果:

  7. ios开发经常使用RGB色值

    iOS中RGB经常使用的色值,同一时候可将对颜色的设置定义成宏,方便开发应用,如: // RGB颜色转换(16进制->10进制) #define UIColorFromRGB(rgbValue) ...

  8. anaconda、pip配置国内镜像

    一.anaconda配置镜像查看源:conda config --show-sources在Mac and Linux下:conda config --add channels https://mir ...

  9. Spring的AsyncHandlerInterceptor

    AsyncHandlerInterceptor提供了一个afterConcurrentHandlingStarted()方法, 这个方法会在Controller方法异步执行时开始执行, 而Interc ...

  10. asp.net为什么会产生app_offline.htm 这个文件,为什么删除后运行浏览器就不会报应用程序脱机

    一般是发布的时候自动生成的.VS2008在发布程序的时候,会首先在网站目录中生成这个文件,并把该虚拟目录的首页设成这个文件. 这样你在发布程序的时候如果有人访问网站就会看到这个页面. 不影响发布.ap ...