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 标签。

你可能感兴趣的:(vue学习笔记)