Prettier+VScode 治好你的代码洁癖

qc1iu 发布于2019-08-23 12:13 / 1174人阅读

摘要：忍无可忍只能拔枪相见了。而只关心格式化文件最大长度混合标签和空格引用样式等。可见，代码格式统一的问题，交给再合适不过了。和配合使用，风味更佳。我的配置文件如下到此，安装完毕，使用就可格式化代码。两者配合才能使项目代码优雅健壮

试想一个多人开发的项目，每次同步代码，看到各个风格迥异，换行空格混乱，4格，2格缩进交替上演的代码文件，分分钟逼死强迫症啊。忍无可忍只能拔枪相见了~~。统一的代码风格规范，对于多人开发的大项目一定是必不可少的，但是口头约定又是一定没有用的（nice脸）。这时候就需要Prettier上场了，一个配置文件，配合VScode，保存即格式化，你的同事都不需要知道代码风格是什么，，整个团队只要clone项目，自动保持统一风格。搞定！

Prettier是什么

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

以上是github上的官方解释，其实就是简单的代码格式工具，和esLint不同在于，ESLint只是一个代码质量工具(确保没有未使用的变量、没有全局变量，等等)。而Prettier只关心格式化文件(最大长度、混合标签和空格、引用样式等)。可见，代码格式统一的问题，交给Prettirer再合适不过了。和Eslint配合使用，风味更佳。

Prettier怎么用

编辑器插件

CLI命令行

编辑器

这里介绍VSCode中如何配置Prettier

安装 Prettier插件 Prettier - Code formatter
安装插件后，调出系统设置就能看到prettier相关选项了，如图

添加自定义配置文件.prettierrc
作为项目的整体代码规范，如果依赖本地配置，显然是不科学的，所以需要.prettierrc 文件覆盖本地配置。我的配置文件如下

   {
      "singleQuote": true,
      "trailingComma": "es5",
      "printWidth": 140,
      "overrides": [
        {
          "files": ".prettierrc",
          "options": { "parser": "json" }
        }
      ]
    }

到此，prettier安装完毕，使用shift+alt+f就可格式化代码。当然每次手动格式化还是很费力啊，怎么办？自动保存。系统设置中增加"editor.formatOnSave": true即可自动保存，还要注意的一点是，如果同时设置了"files.autoSave": "autoSaveDelay",保存及格式化会失效。files.autoSave配置成别的选项即可。

另外，如果项目配置了.editorConfig文件，在配置了"editor.formatOnSave": true后，如果项目成员没有安装 Prettier 插件，保存时就会读取.editorConfig文件，同样可以格式化代码。启用 Prettier 插件后，.editorConfig的配置就会失效，读取.prettierrc 文件的配置

命令行

命令行用法需要安装prettier,npm install prettier --save-dev，使用prettier write **.js 就可以格式化文件。将添加到你的NPM脚本中，prettier --write "./src/**/*.js,这样就可以批量格式化项目中的所有文件了。

结语

prettier只关心代码格式，显然是不够的。项目中还是要引入ESlint。两者配合才能使项目代码优雅健壮

云服务器 GPU云服务器 Prettier 洁癖 vscode vscode webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98125.html

用VS Code开发Vue应用

摘要：这是为什么呢因为我们虽然引入了，但是还没有对做设置，我们在项目的根目录下创建一个文件，然后在其中加入再次执行，现在我们看到已经能够起作用了。摘要： 0错误0警告应该是每个程序员最基本的要求。原文：用vscode开发vue应用作者：张京 Fundebug经授权转载，版权归原作者所有。现在用VSCode开发Vue.js应用几乎已经是前端的标配了，但很多时候我们看到的代码混乱不堪，作为一...

zhaofeihao 2019-05-23 16:28 评论0 收藏0
在Typescript项目中，如何优雅的使用ESLint和Prettier

摘要：对于项目的编码规范而言，主要有两种选择和。此外由于性能问题，官方决定全面采用，甚至把仓库作为测试平台，而的解析器也成为独立项目，专注解决双方兼容性问题。最近在我的项目的编码规范中全量的用代替了针对其中遇到的问题做一个记录。对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由...

chemzqm 2019-08-02 15:27 评论0 收藏0
在Typescript项目中，如何优雅的使用ESLint和Prettier

摘要：对于项目的编码规范而言，主要有两种选择和。此外由于性能问题，官方决定全面采用，甚至把仓库作为测试平台，而的解析器也成为独立项目，专注解决双方兼容性问题。最近在我的项目的编码规范中全量的用代替了针对其中遇到的问题做一个记录。对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由...

WilsonLiu95 2019-08-23 18:29 评论0 收藏0
在Typescript项目中，如何优雅的使用ESLint和Prettier

摘要：对于项目的编码规范而言，主要有两种选择和。此外由于性能问题，官方决定全面采用，甚至把仓库作为测试平台，而的解析器也成为独立项目，专注解决双方兼容性问题。最近在我的项目的编码规范中全量的用代替了针对其中遇到的问题做一个记录。对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由...

琛ｈ。 2019-08-30 11:18 评论0 收藏0
梳理前端开发使用eslint-prettier检查和格式化代码

摘要：梳理前端开发使用检查和格式化代码问题痛点在团队的项目开发过程中，代码维护所占的时间比重往往大于新功能的开发。使用格式化所有代码。参考文档如何花分钟解决产生的各种错误的记忆现场原文转载梳理前端开发使用检查和格式化代码线上猛如虎，线下怂如鼠梳理前端开发使用eslint-prettier检查和格式化代码问题痛点在团队的项目开发过程中，代码维护所占的时间比重往往大于新功能的开发。因此编...

yangrd 2019-08-22 17:01 评论0 收藏0