強(qiáng)迫癥。想統(tǒng)一一下代碼格式

步驟 安裝 eslint → 安裝 prettier→修改他們的配置文件→設(shè)置webstorm

一、安裝環(huán)境

1.1 項目下安裝 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 項目下安裝 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就會自己格式化代碼，不需要fix file

image.png

若出現(xiàn)以上錯誤可以設(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,
    // 只使用單引號
    quotes: [1, 'single']
  }
};