最近开始使用Webstorm与vscode编辑前端代码,发现自动格式化存在问题,解决方案过于分散驳杂,现将其大致整理如下:
vscode代码格式化问题:
1. 问题描述
使用自带格式化方式,出现与eslint格式验证冲突问题:
- 句末自动加分号
- 单引号自动变为双引号
- 函数与括号之间空格被删除
2. 解决方法
- 修改快捷键 File->preference->keyboard Shortcuts ->format document :Ctrl+Alt+Q
- 修改prettier配置
a.npm install --global prettier
b. 新建.prettierrc.json配置文件放在vue项目的root目录下(也就是和README.md文件同一目录)
c. 配置.prettierrc.json文件如下
如此可解决上述前两个问题。{ "semi": false, // 句末加分号 "singleQuote": true, // 用单引号 "bracketSpacing": true // 对象&数组是否追加空格 }
- 对于第三个问题,目前prettier不支持,只能修改eslint校验方式(prettier函数后不加空格,令eslint不校验此设置)
- eslintrc.js中rules添加
‘space-before-function-paren’: ‘off’
- eslintrc.js中rules添加
经试验,修改配置文件需要重启程序。
WebStorm代码格式化问题:
1. 问题描述
<script></script>标签内代码默认缩进,与eslint规则冲突。
2. 解决方法
- 修改IDEA或webstorm配置
File => Setting => Editor => Code Style => HTML
找到 Do not indent children of 的选项
添加 script 标签。