用prettier和vscode实现代码自动格式化

介绍

Prettier的作用是对代码进行格式化，并不关注代码质量潜在问题的检查。

Prettier 自身的规范倾向于团队的代码风格的规范或统一，例如每行最大长度，单引号还是双引号，等号左右空格，使用tab还是空格等等。

除了js/ts外，它还支持对多种语言进行格式化，如vue、html、css、less、scss、json、jsx等等，是一个比较综合的代码格式化工具。

使用

其实prettier官网有提供各种使用的姿势，这里首先跟大家介绍我们常用的vscode编辑器集成

1. 插件

首先安装vscode的插件prettier-vscode

安装成功后，编辑器默认的格式化处理就会被prettier代替， 默认快捷键是alt + shift + f

2. 配置

在用户级别的settings.json中设置编辑器的默认代码格式化器：

{
    "editor.formatOnSave": true, // 开启保存文件自动格式化代码
	"editor.defaultFormatter": "esbenp.prettier-vscode", // 默认的代码格式化工具
	"prettier.requireConfig": true, // 需要Prettier的配置文件
        "[javascript]" { 
            "editor.defaultFormatter": "esbenp.prettier-vscode" 
            },
	"[typescript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	} 
}

2. 安装

• 安装 Prettier：使用 npm 或 yarn 进行安装。

//使用 npm 安装 
npm install --save-dev prettier 
// 或者使用 yarn 安装 
yarn add --dev prettier

• 创建 .prettierrc 文件：在项目根目录下创建 .prettierrc 文件，并按照需求进行配置。

{
    "trailingComma": "all",
    "semi": true,
    "useTabs": true
}

配置文件的选项可以参考官网：prettier.io/docs/en/con…

• 创建 .prettierignore 在项目根目录下创建 .prettierignore 文件，并按照需求进行配置。

dist
docs
package-json.lock

# semantic-release
CHANGELOG.md

• 配置 Prettier 命令：在 package.json 文件中添加如下命令：

{ 
    "scripts": { 
        "prettier": "prettier src/**/*.{js,jsx,json,css,scss,md}" 
      } 
 }

上述命令表示格式化 src 目录中所有后缀名为 js、jsx、json、css、scss 和 md 的文件。

• 运行 Prettier：使用命令行运行 Prettier，会对指定的文件进行格式化，例如：

    // yarn 
    yarn prettier --write
    // npm 
    npm run prettier --write

上述命令中，--write 表示 Prettier 直接修改文件，而不是输出格式化后的内容。