強(qiáng)迫癥碟绑。想統(tǒng)一一下代碼格式
步驟 安裝 eslint → 安裝 prettier→修改他們的配置文件→設(shè)置webstorm
一槐壳、安裝環(huán)境
1.1 項(xiàng)目下安裝 eslint
npm install eslint
1.2 安裝 eslint-config-ali
npm install --save-dev eslint-config-ali eslint@^6.8.0 eslint-plugin-import@^2.19.1 eslint-plugin-vue@^6.0.1 vue-eslint-parser@^7.0.0
1.3 項(xiàng)目下安裝 prettier 和 eslint-plugin-prettier
npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier
npm install --save-dev eslint-config-prettier
2. 修改.eslintrc.js
extends: [
'eslint-config-ali/vue',
'plugin:prettier/recommended'
],
2.1. 根目錄添加文件 .prettierrc.js
module.exports = {
printWidth: 80,
semi: true,
singleQuote: true,
trailingComma: 'none',
bracketSpacing: true,
jsxBracketSameLine: false,
arrowParens: 'avoid',
requirePragma: false,
proseWrap: 'preserve'
};
3.依賴參考
image.png
二峭状、開始設(shè)置webstorm
1. 設(shè)置eslint（注意要下eslint的插件）
image.png
2. 設(shè)置prettier
image.png
三尿赚、FAQ
現(xiàn)在在文件下Ctrl+S就會(huì)自己格式化代碼环葵，不需要fix file
image.png
若出現(xiàn)以上錯(cuò)誤可以設(shè)置 .eslintrc.js
rules: {
'vue/comment-directive': 0,
'vue/no-unused-components': 0,
'vue/no-use-v-if-with-v-for': 0,
'vue/require-prop-type-constructor': 0,
'vue/use-v-on-exact': 0,
}
.eslintrc.js 參考
module.exports = {
root: true,
env: {
node: true
},
extends: ['eslint-config-ali/vue', 'plugin:prettier/recommended'],
rules: {
'vue/comment-directive': 0,
'vue/no-unused-components': 0,
'vue/no-use-v-if-with-v-for': 0,
'vue/require-prop-type-constructor': 0,
'vue/use-v-on-exact': 0,
// 只使用單引號(hào)
quotes: [1, 'single']
}
};
