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中張京回答