Webstorm与vscode自动格式化问题

最近开始使用Webstorm与vscode编辑前端代码，发现自动格式化存在问题，解决方案过于分散驳杂，现将其大致整理如下：

vscode代码格式化问题：

1. 问题描述

使用自带格式化方式，出现与eslint格式验证冲突问题：

• 句末自动加分号
• 单引号自动变为双引号
• 函数与括号之间空格被删除

2. 解决方法

1. 修改快捷键 File->preference->keyboard Shortcuts ->format document :Ctrl+Alt+Q
2. 修改prettier配置
   a. npm install --global prettier
   b. 新建.prettierrc.json配置文件放在vue项目的root目录下(也就是和README.md文件同一目录)
   c. 配置.prettierrc.json文件如下

   {
   	"semi": false, // 句末加分号
      	"singleQuote": true, // 用单引号
      	"bracketSpacing": true // 对象&数组是否追加空格
   }
   

   如此可解决上述前两个问题。
3. 对于第三个问题，目前prettier不支持，只能修改eslint校验方式（prettier函数后不加空格，令eslint不校验此设置）
   1. eslintrc.js中rules添加
      ‘space-before-function-paren’: ‘off’

经试验，修改配置文件需要重启程序。

WebStorm代码格式化问题：

1. 问题描述

标签内代码默认缩进，与eslint规则冲突。

2. 解决方法

• 修改IDEA或webstorm配置
  File => Setting => Editor => Code Style => HTML
  找到 Do not indent children of 的选项
  添加 script 标签。