notepad json格式化插件_Prettier + ESLint VSCode 插件配置指南

经常在 code review 的时候发现有些同学提交上来的代码格式还存在问题，很影响阅读代码的情绪，究起原因来无非是两种情况：1、git commit 的时候加了 -n 参数，跳过了 eslint 检查和 prettier 格式化。2、VSCode 中 ESLint 和 Prettier 插件未配置正确。接下来看一下如何正确配置这 2 个插件(着重 prettier 插件)

相信做过前端的同学对 ESLint 和 Prettier 都不陌生了吧？这里先还是先简单介绍一下吧

ESLint 属于一种QA工具，是一个ECMAScript/JavaScript语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

Prettier 是一个自动帮你处理代码中不符合 ESLint 规范的工具。

上面 2 个工具库都是在项目代码中进行配置的，这篇文章主要介绍如何配合 eslint 和 prettier 对应的 vscode 插件在代码编写过程中及时帮我们修正问题，而不是等到 git commit 的时候才发现一大堆问题。所以至于如何在项目代码中如何使用这里不做介绍，可以参考这里。

准备工具

在 VSCode 中安装以下插件

ESLint VSCode 插件，主要的作用是会将有错的地方进行标记，方便我们知道哪些文件、哪些代码是有问题的

https://github.com/Microsoft/vscode-eslintgithub.com

Prettier VSCode 插件，主要作用是代码格式化的时候按照项目约定的规范进行代码美化

prettier/prettier-vscodegithub.com

开始设置

打开vscode 配置文件 setting.json,

快捷键：command + p 然后输入 > 进入命令搜索模式，再输入: Settings(JSON)

1、设置代码在保存的时候自动格式化

{"editor.formatOnSave": true
}

2、设置 .js .ts .jsx .tsx .less .css .json 格式的文件都采用 prettier-vscode 插件进行格式化

{"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript|react]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript|react]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[less]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
}

3、配置 prettier 插件读取项目中哪个配置文件，默认是根目录下的 .prettierrc 文件，如果你的项目下不是这个文件就需要修改为你的配置文件，比如很多项目为 .prettierrc.js 或者 .prettierrc.ts

{"prettier.configPath": ".prettierrc.js",
}

至此配置过程就完成了，现在来试试效果

【完】

notepad json格式化插件_Prettier + ESLint VSCode 插件配置指南相关推荐

linux ssh 插件,玩转VSCode插件之Remote-SSH的使用情况
前言每当更换电脑就要从新搭建一遍开发环境... 每当拉完最新代码程序在本地跑不起来的时候就要检查服务器和开发电脑的环境... 每当服务器上出Bug的时候就想如果可以能够调试服务器代码多好啊.. 你是 ...
vscode格式化关于符合eslint检测语法配置
.js文件插件:JavaScript Standard Style 配置:解决ES6语法格式化 {"files.associations": {"*.js": ...
vscode中怎样格式化js代码_[VSCode插件推荐] Bracket Pair Colorizer: 为代码中的括号添上一抹亮色...
在代码编写过程中,各种括号 {[()]} 必不可少.然而,随着代码量的增加,你有没有因为括号的嵌套太多,而导致代码难以阅读? 我们来看看下面的代码,在第三行代码的最后部分,连续出现了5个右括号! 这还 ...
插件开发之VSCode
欢迎各位大家关注本人微信公众号:程序员JC,小程序:RobotJC 里面包含很多本人之前做的小案例,也许这里有你想要的东西哦. 鉴于我前两周研究了并开发了一个VSCode插件的情况,这次就讲一下插件开 ...
VSCode插件之View In Browser/Open in Browser‘在浏览器中查看’
推荐: vscode浏览器打开html vscode修改默认浏览器一. VSCode插件View InBrowser,在浏览器中查看当前插件功能类似Atom中的"Run-In-Brows ...
vscode的eslint无效_VSCode配置eslint
在Vue.js项目中,使用的是eslint检查. 而在我写完代码后,cnpm run dev运行命令...然后悲剧了,一大堆报错!╮(╯▽╰)╭ 安装插件:Vetur:这是vscode上一个vue.j ...
anacoda里面安装包显示失败_VScode离线安装插件，以及安装插件失败问题
一直使用VScode,所以在新项目中,领了虚拟机之后,依然使用VScode,但是VScode安装的只是一个工具,里面没有任何插件,没有插件怎么办公啊,所以只能自己安装离线插件了,找了很多方法,终于安装 ...
notepad转换json_Notepad++的Json格式化插件
安装 : 1.下载插件压缩包并解压出dll:Jsonviewer2.dll(64位)或NPPJSONViewer.dll(32位); 2..拷贝对应dll到Notepad++安装目录下的plugin ...
idae 格式化代码设置eslint_vscode 中格式化代码[vue2支持，插件ESLint、Prettier、Vetur]...
1. 安装vscode插件ESLint Prettier formatter for Visual Studio Code Vetur 2. 配置文件 .editorconfigroot = true ...

notepad json格式化插件_Prettier + ESLint VSCode 插件配置指南

开始设置

notepad json格式化插件_Prettier + ESLint VSCode 插件配置指南相关推荐

最新文章

热门文章