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. CRC32 of Ether FCS with STM32

    Everyone knows that STM32F1xx, STM32F2xx, STM32F4xx have a hardware unit with a polynomial CRC32 0x0 ...

  2. SQL 版本说明

    http://www.cnblogs.com/SameZhao/p/6184924.html The ProductMajorVersion产品主版本号 如: 12为 SQL SERVER 2014 ...

  3. dbMigration .NET 数据同步迁移工具

    官网:http://fishcodelib.com/DBMigration.htm

  4. react-router 从 v2/v3 to v4 迁移(翻译)

    react-router v4 是完全重写的,所以没有简单的迁移方式,这份指南将为您提供一些步骤,以帮助您了解如何升级应用程序. 注意: 这份迁移指南适用于react-router v2和v3,但为简 ...

  5. SpringBoot配置多数据源

    原文:https://www.jianshu.com/p/033e0ebeb617 项目中用到了两个数据库,分别是Oracle和Mysql,涉及到了多数据源问题,这里做下记录 官方讲解:https:/ ...

  6. Maven编译时跳过Test

    在使用Maven编译项目时发现,可能在Test中写了一些有问题的代码,但是,由于写的代码比较多,所以不愿意去找具体的错误,反正Test中的代码不会影响项目的正常运行.于是想在编译时跳过对Test部分的 ...

  7. 监测uitableview 向上滑动和向下滑动的事件

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGFloat height = _varietyTableView.frame.si ...

  8. android studio build.gradle中 project.ANDROID_BUILD_SDK_VERSION

    1.メニューの [File] -> [Import Module]2.Source directory に先ほど解凍したディレクトリを指定3.「facebook」 を選択した状態に Finish ...

  9. Ioc:Autofac Registration Concepts

    Reflection Components When using reflection-based components, Autofac automatically uses the constru ...

  10. 转: centos7.5 下 coredns+etcd搭建DNS服务器

    coredns简介 CoreDNS是一个DNS服务器,和Caddy Server具有相同的模型:它链接插件.CoreDNS是云本土计算基金会启动阶段项目. CoreDNS是SkyDNS的继任者. Sk ...