WebStorm 配置Prettier 配置.prettierrc主动格式化代码
近来小鹿开始从vscode转到利用WebStorm进行前端开发，主要是以为WebStorm的强大功能以及界面更让小鹿感觉到舒服，但是我用了半天后发现小鹿写的代码居然都没有进行格式化。网上找了很多方案（尤其是CSDN）也都是复制粘贴的一堆没用的方案，不过终极小鹿照旧找到了解决办法，记载一下。
安装Prettier
首先是去插件市肆里面安装，通常来说如果是最新下载的WebStorm，大都已经内置安装好了Prettier，不过如果没安装也没关系，
**小鹿最开始以为安装完这里就完事了，其实并不是！！**这里只是完成了插件的安装，这时候需要在项目中启用Prettier
启用Prettier
- npm install --save-dev --save-exact prettier
这个时候就已经完成了生存主动格式化代码的操作了。
额外配置
通常来说，小鹿还会将一些规范卸载配置文件中，如许多人同时开发的时候就可以很好的统一风格
- {
- "semi": true,
- "singleQuote": true,
- "tabWidth": 2,
- "printWidth": 100,
- "trailingComma": "es5",
- "arrowParens": "always",
- "endOfLine": "lf",
- "bracketSpacing": true,
- "vueIndentScriptAndStyle": true
- }
- 作用： 在语句末尾添加分号。
- 示例： true
- 说明： 有助于避免 ASI（主动分号插入）大概导致的题目。
singleQuote
- 作用： 利用单引号而不是双引号。
- 示例： true
- 说明： 这是很多 JavaScript 项目标常见选择。
tabWidth
- 作用： 缩进利用 2 个空格。
- 示例： 2
- 说明： Vue 和很多前端项目标尺度缩进宽度。
printWidth
- 作用： 每行代码的最大长度。
- 示例： 100
- 说明： 100 是一个比较平衡的选择，既不会太短也不会太长。
trailingComma
- 作用： 在对象和数组的最后一项添加逗号。
- 示例： "es5"
- 说明： "es5" 体如今 ES5 中合法的地方添加逗号（数组、对象）。有助于生成更清楚的 git diff。
arrowParens
- 作用： 箭头函数总是包含参数括号。
- 示例： "always"
- 说明： 比方：(x) => x 而不是 x => x。保持一致性，避免混淆。
endOfLine
- 作用： 利用 Unix 风格的换行符（LF）。
- 示例： "lf"
- 说明： 避免在不同操作系统间切换时出现题目。
bracketSpacing
- 作用： 在对象字面量的括号内添加空格。
- 示例： true
- 说明： 比方：{ foo: bar } 而不是 {foo: bar}。
vueIndentScriptAndStyle
- 作用： 缩进 Vue 文件中的 <script> 和 <style> 标签内容。
- 示例： true
- 说明： 使代码结构更清楚。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
