We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
vscode商店搜索Prettier - Code formatter并启用。
Prettier - Code formatter
https://github.com/prettier/prettier-vscode
prettier-eslint 和prettier-tslint都被该插件内置了,所以不需要安装。但是eslint或tslint需要安装并启用。
prettier-eslint
prettier-tslint
eslint
tslint
可以在根目录新建一个名为.editorconfig的文件,也可以在编辑器的settings.json中进行配置。 配置方法示例:
.editorconfig
settings.json
{ "prettier.printWidth": 120 }
{ "printWidth": 120 }
名称 |作用 | 默认值| 数据类型 ---|--- | --- | --- | --- | --- | printWidth | 一行显示代码的最大长度 | 80 | init tabWidth | tab的缩进大小 | 2 | init singleQuote | 单引号 | false | bool trailingComma | 在末尾可能出现逗号的地方添加逗号 | "none" bracketSpacing | 控制对象内边缘是否显示空格 | true | bool jsxBracketSameLine | 如果为true,则将多行jsx元素的>放在最后一行的末尾,而不是单独放在下一行 | false | bool parser | javascript使用哪个解析器| 'babylon' semi | true: 在每行末尾添加分号。false:只在可能导致ASI失败的行开头添加分号 | true | bool useTabs | true: 用制表符来缩进行 | false | bool proseWrap | (markdown)单行拆分成多行进行显示 | 'preserve' arrowParens | 箭头函数只有一个参数时用括号包裹 | 'avoid' jsxSingleQuote | false: jsx中不使用单引号 | false | bool htmlWhitespaceSensitivity | HTML对空白的灵敏度 | 'css' endOfLine | 行结尾的风格设置 | 'auto' quoteProps | 对象中属性引号的显示规则 | 'as-needed'
true
>
bracketSpacing案例: 若为true则
bracketSpacing
const a = {b: 1}
会被格式化为
const a = { b: 1 }
即{}左右都会被加一个空格成{ }
{}
{ }
trailingComma参数:
trailingComma
arrowParens参数:
arrowParens
"avoid"
"always"
htmlWhitespaceSensitivity 参数:
htmlWhitespaceSensitivity
display
endOfLine参数:
endOfLine
quoteProps参数:
quoteProps
prettier.eslintIntegration: boolean = false 使用 prettier-eslint而不是 prettier。其他设置仅在无法从ESLint规则推断出它们时才有效。
prettier
prettier.tslintIntegration : boolean = false
使用更prettier-tslint而不是 prettier。其他设置仅在无法从TSLint规则推断出它们时才有效。
prettier.stylelintIntegration: boolean = false 使用更 prettier-stylelint而不是 prettier。其他设置仅在无法从stylelint 规则推断出它们时才有效。
prettier-stylelint
prettier.requireConfig : boolean = false 需要一个'prettierconfig'文件取格式化
prettier.ignorePath : 要忽略的文件名 = .prettierignore 传入一个文件的路径,这个文件里面写了哪些是不需要做格式化的文件,写法和.gitignore一样。默认读取.prettierignore文件里面的内容,设置为null则不读取忽略文件。 需要重新启动。
.prettierignore
prettier.disableLanguages : string[] = ["vue"] 禁止传入语言的格式化,需要重新启动。禁止后该语言不会被格式化,即使有其他格式化插件。
注意: 如果在Visual Studio代码设置中同时启用prettier.tslintIntegration和prettier.eslintIntegration,则TSLint将用于对TypeScript代码进行lint。 如果您更愿意使用ESLint,请通过设置prettier.tslintIntegration为禁用,TSLint禁用。
prettier.tslintIntegration
prettier.eslintIntegration
TSLint
TypeScript
若不设置则会格式化所有支持的语言
"[javascript]": { "editor.formatOnSave": false }
需要在项目根目录添加一个名为.prettierignore的文件,里面写入不需要被格式化文件的路径,如src下的所有文件:
src
/src
// prettier-ignore
// prettier-ignore matrix( 1, 0, 0, 0, 1, 0, 0, 0, 1 )
<!-- prettier-ignore --> <div class="x" >hello world</div > <!-- prettier-ignore-attribute --> <div (mousedown)=" onStart ( ) " (mouseup)=" onEnd ( ) " ></div> <!-- prettier-ignore-attribute (mouseup) --> <div (mousedown)="onStart()" (mouseup)=" onEnd ( ) " ></div>
/* prettier-ignore */
/* prettier-ignore */ .my { }
在编辑器的设置中添加如下配置
"editor.formatOnSave": true,
在根目录文件.prettierrc中加入如下规则
.prettierrc
{ "printWidth": 120, "trailingComma": "es5", "arrowParens": "always" }
The text was updated successfully, but these errors were encountered:
No branches or pull requests
1. 如何下载
vscode商店搜索
Prettier - Code formatter
并启用。2. 设置eslint或tslint
prettier-eslint
和prettier-tslint
都被该插件内置了,所以不需要安装。但是eslint
或tslint
需要安装并启用。3. 如何配置规则
可以在根目录新建一个名为
.editorconfig
的文件,也可以在编辑器的settings.json
中进行配置。配置方法示例:
settings.json
.editorconfig
4. 可配置的规则
4.1 Prettier的规则概览
名称 |作用 | 默认值| 数据类型
---|--- | --- | --- | --- | --- |
printWidth | 一行显示代码的最大长度 | 80 | init
tabWidth | tab的缩进大小 | 2 | init
singleQuote | 单引号 | false | bool
trailingComma | 在末尾可能出现逗号的地方添加逗号 | "none"
bracketSpacing | 控制对象内边缘是否显示空格 | true | bool
jsxBracketSameLine | 如果为
true
,则将多行jsx元素的>
放在最后一行的末尾,而不是单独放在下一行 | false | boolparser | javascript使用哪个解析器| 'babylon'
semi | true: 在每行末尾添加分号。
false:只在可能导致ASI失败的行开头添加分号 | true | bool
useTabs | true: 用制表符来缩进行 | false | bool
proseWrap | (markdown)单行拆分成多行进行显示 | 'preserve'
arrowParens | 箭头函数只有一个参数时用括号包裹 | 'avoid'
jsxSingleQuote | false: jsx中不使用单引号 | false | bool
htmlWhitespaceSensitivity | HTML对空白的灵敏度 | 'css'
endOfLine | 行结尾的风格设置 | 'auto'
quoteProps | 对象中属性引号的显示规则 | 'as-needed'
4.1.1 Prettier例子&参数
bracketSpacing
案例:若为true则
会被格式化为
即
{}
左右都会被加一个空格成{ }
trailingComma
参数:arrowParens
参数:"avoid"
: 不包裹"always"
: 包裹htmlWhitespaceSensitivity
参数:display
属性默认值的格式endOfLine
参数:quoteProps
参数:4.2 VSCode特殊设置
prettier.eslintIntegration: boolean = false
使用
prettier-eslint
而不是prettier
。其他设置仅在无法从ESLint规则推断出它们时才有效。prettier.tslintIntegration : boolean = false
使用更
prettier-tslint
而不是prettier
。其他设置仅在无法从TSLint规则推断出它们时才有效。prettier.stylelintIntegration: boolean = false
使用更
prettier-stylelint
而不是prettier
。其他设置仅在无法从stylelint 规则推断出它们时才有效。prettier.requireConfig : boolean = false
需要一个'prettierconfig'文件取格式化
prettier.ignorePath : 要忽略的文件名 = .prettierignore
传入一个文件的路径,这个文件里面写了哪些是不需要做格式化的文件,写法和.gitignore一样。默认读取
.prettierignore
文件里面的内容,设置为null则不读取忽略文件。需要重新启动。
prettier.disableLanguages : string[] = ["vue"]
禁止传入语言的格式化,需要重新启动。禁止后该语言不会被格式化,即使有其他格式化插件。
5. 如何某些不需要被格式化怎么做?
5.1 设置不需要格式化的语言
若不设置则会格式化所有支持的语言
5.2 设置不需要格式化的文件
需要在项目根目录添加一个名为
.prettierignore
的文件,里面写入不需要被格式化文件的路径,如src
下的所有文件:5.3 设置不被格式化的段落
// prettier-ignore
/* prettier-ignore */
6. 实战使用指南
6.1. 设置保存时自动格式化
在编辑器的设置中添加如下配置
6.2 Prettier的规则配置项
在根目录文件
.prettierrc
中加入如下规则The text was updated successfully, but these errors were encountered: