java code formatter,Prettier - Code formatter使用

更多VSCode插件使用请访问：VSCode常用插件汇总

Prettier - Code formatter这是一款 格式化js、css代码插件，暂不解释。

Prettier是什么？ Prettier的中文意思是“漂亮的、机灵的”，也是一个流行的代码格式化工具的名称，它能够解析代码，使用你自己设定的规则来重新打印出格式规范的代码。

Prettier具有以下几个有优点： 1.可配置化 2.支持多种语言 3.集成多数的编辑器 4.简洁的配置项 使用Prettier在code review时不需要再讨论代码样式，节省了时间与精力。

如何对Prettier进行配置

一共有三种方式支持对Prettier进行配置：

1.根目录创建 .prettierrc 文件，能够写入YML、JSON的配置格式，并且支持.yaml、.yml、.json、.js后缀； 2.根目录创建 .prettier.config.js 文件，并对外export一个对象； 3.在 package.json 中新建prettier属性。

下面我们使用 prettierrc.js 的方式对prettier进行配置，同时讲解下各个配置的作用。

module.exports = {

// 使用 2 个空格缩进

tabWidth: 2,

// 不使用缩进符，而使用空格

useTabs: false,

// 行尾需要有分号

semi: true,

// 使用单引号

singleQuote: true,

// 对象的 key 仅在必要时用引号

quoteProps: 'as-needed',

// jsx 不使用单引号，而使用双引号

jsxSingleQuote: false,

// 末尾不需要逗号

trailingComma: 'none',

// 大括号内的首尾需要空格

bracketSpacing: true,

// jsx 标签的反尖括号需要换行

jsxBracketSameLine: false,

// 箭头函数，只有一个参数的时候，也需要括号

arrowParens: 'always',

// 每个文件格式化的范围是文件的全部内容

rangeStart: 0,

rangeEnd: Infinity,

// 不需要写文件开头的 @prettier

requirePragma: false,

// 不需要自动在文件开头插入 @prettier

insertPragma: false,

// 使用默认的折行标准

proseWrap: 'preserve',

// 根据显示样式决定 html 要不要折行

htmlWhitespaceSensitivity: 'css',

// 换行符使用 lf

endOfLine: 'lf'

}

配置大概列出了这些，还有一些其他配置可以在官方文档进行查阅。

注意一点，parser的配置项官网列出了如下可选项：

babylon

flow

typescript Since v1.4.0

postcss Since v1.4.0

json Since v1.5.0

graphql Since v1.5.0

markdown Since v1.8.0

但是如果你使用了vue的单文件组件形式，记得将 parser 配置为vue，目前官方文档没有列出来。当然如果你自己写过AST的解析器，也可以用你自己的写的 parser: require("./my-parser")。

Prettier + editorConfig 搭配使用处理旧项目文件

如果你有一个旧项目想通过Prettier + editorConfig来简单规范一下格式也可以使用这个工具： 1.分别安装两个工具不必多说了 2.创建 .prettierrc 配置文件 该配置文件会继承 editorConfig 的配置 3.向 package.json 添加可执行脚本: prettier": "prettier --write ./* 例如：

prettier": "prettier --write './src/**/*.js' './src/**/*.jsx' './src/**/*.css' './src/**/*.scss'

4.创建 .prettierignore 文件，用来忽略一些文件 && 目录 5.一切准备就绪之后 !!!! npm run prettier 就可以看到提示文件更改记录了

.prettierrc.js配置文件：

# .prettierrc.js 配置文件

// https://prettier.io/docs/en/options.html

module.exports = {

trailingComma: "none", // 数组 对象尾随不需要逗号

bracketSpacing: true, // 对象空格 { foo: bar }, false=> {foo:bar}

jsxBracketSameLine: false, // jsx闭标签是否另起一行

arrowParens: 'always', // 箭头函数，只有一个参数的时候，也需要括号

singleQuote: true, // 单引号

semi: true, //是否在语句末尾就分号

};

.prettierignore 文件配置

# .prettierignore 文件配置

/node_modules

/dist

/src/lib/

/src/global/fonts

/docs

/.vscode

node_modules

.eslintrc.js

package.json

package-lock.json