WebStorm&eslintrc&prettier使用记录

WebStorm配置tab键输出四空格

注意新版本WebStorm Ctrl+Alt+L格式化不生效需要关闭EditorConfig插件(重启IDE后生效)

配置eslintrc规则

修改package.json文件
安装eslint-plugin-vue 删除eslint-plugin-html
npm install eslint-plugin-vue -D
npm uninstall eslint-plugin-html -D

修改.eslintrc.js文件

• 把parser: ‘babel-eslint’ 挪到parserOptions中
• 在plugins里删除html
• 在extends里添加’plugin:vue/recommended’
• 在rules里添加如下

'indent': 'off',
// 4代表4个空格 1代表1倍缩进
'vue/script-indent': ['error', 4, {'baseIndent': 1}]
// 配置html 注意html没有第三个参数
'vue/html-indent': ['error', 4, {'baseIndent': 1}]

---

使用prettier时 webstorm会在script标签的下一行缩进

<script>
	# 此时prettier会报错
	export default {

配置Do not Indent Children Of可解决

eslintrc配置原文 https://segmentfault.com/q/1010000013682009/a-1020000013683302中张京回答