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. STM32 F4 Clock Sources

    STM32 F4 Clock Sources Goal: routing clock sources to the microcontroller output pin (MCO1)    High- ...

  2. 新玩的windows phone app studio

    其实我是一直想开发windows phone 8平台的应用的,奈何开始windows phone 8开发却是不是件容易的事.Windows phone 8的开发其实是对计算机的硬件有要求的,首先要装w ...

  3. 该对象尚未初始化。请确保在所有其他初始化代码后面的应用程序启动代码中调用 HttpConfiguration.EnsureInitialized()。

    WebAPI使用属性路由,配置config.MapHttpAttributeRoutes();后出现错误: System.InvalidOperationException: 该对象尚未初始化.请确保 ...

  4. java数据结构 栈stack

    栈(Stack) 栈(Stack)实现了一个后进先出(LIFO)的数据结构. 你可以把栈理解为对象的垂直分布的栈,当你添加一个新元素时,就将新元素放在其他元素的顶部. 当你从栈中取元素的时候,就从栈顶 ...

  5. TStream实现多表查询

    TStream实现多表查询 function TynFiredac.QuerySQLS(const ASQL, ASQL2: string; AStorageFormat: string = 'bin ...

  6. 【jvm】linux 调用 jmap 报错Permission denied

    linux 调用 jmap  报错Permission denied 解决方案: 分别对java安装目录,java的bin目录以及jmap命令设置权限 chmod jdk1..0_79 chmod b ...

  7. Safari支不支持HTML5录音? 现在浏览器中最好的解决方案是WebRTC下的 navigator.getUserMedia API。

    先放结论:Safari支不支持HTML5录音? ——据我调查,不支持. 现在浏览器中最好的解决方案是WebRTC下的 navigator.getUserMedia API. 可是当使用Can I us ...

  8. Android之多种Bitmap效果

    1. 将图片变为圆角 2. 获取缩略图图片 3. LOMO特效 4. 旧时光特效 5. 暖意特效 6. 根据饱和度.色相.亮度调整图片 7. 添加图片外边框 8. 添加内边框 9. 创建一个缩放的图片 ...

  9. MVC的Ajax异步请求

    @using (Ajax.BeginForm("GetTime","order",new AjaxOptions() { Confirm="你确认这么 ...

  10. Docker配置国内加速器加速镜像下载的方法

    在搭建hyperledger fabric的开发环境的时候,用docker去下载镜像,好慢好慢,慢到下了一个下午没有下载完成,最后还是失败了.最后去网上找了一下,发现有配置国内加速器加速镜像下载的方法 ...