prettier格式化代码

一、安装Prettier

yarn add -D -E prettier

二、基础配置

.prettierrc.js

module.exports = { // 每行代码最大长度 printWidth: 200, // tab缩进宽度 tabWidth: 4, // 行尾需要有分号 semi: true, // 使用单引号 singleQuote: true, // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格 bracketSpacing: true, // 不使用尾部逗号 trailingComma: 'none', // 箭头函数，只有一个参数的时候也需要括号 arrowParens: 'always', // 每个文件格式化的起始范围 rangeStart: 0, // 每个文件格式化的结束范围 rangeEnd: Infinity, // vue文件的script标签和Style标签下的内容是否需要缩进 vueIndentScriptAndStyle: false, // 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行（不适用于自闭和元素） jsxBracketSameLine: false, // 内嵌代码格式化 embeddedLanguageFormatting: 'off', // 不需要写文件开头的 @prettier requirePragma: false };

.prettierignore

node_modules dist .DS_Store package.json .* **/.git

三、VSCode配置

1.   安装Prettier扩展

 

2.  setting.json配置

 

3.  自动格式化配置

上面setting.json里面的 

"editor.formatOnSave": true, 

即设置为在保存时自动格式化，保存时自动进行格式化，或用Shift+Option+f执行格式化

四、WebStorm配置

1.   安装Prettier插件

 

2.  自动格式化配置

 

或用Shift+Option+Command+p执行格式化