vue 项目在 vscode 中的配置

vscode + eslint + prettier 配置
配置目标：能够使用 alt + ctrl + f 对代码进行格式化，并配置 eslint 规则保持与 vscode 一致. 并且能够自动 import 包，自动删除 未使用的多余 import 语句。

使用 vscode 格式化时真是头疼，prettier 和 eslint 的规则总吃撞车， 刚 ctrl+s 保存自动格式化，立刻又按照另一种规则给格式化了。

好好研究了一番，发现代码规范实在不用那么复杂，因为目前网上流行的配置是 vue-element-admin 中那一套配置，几年过去，其实没必要那么复杂了

文章尾部有 .prettierrc 配置文件 和 eslint.js 配置，可以直接 copy 到项目中使用

vscode 的快捷键alt + ctrl + f到底是如何格式化的？
vscode 的一旦安装了 prettier 插件，那么扩展 prettier-vscode 会读取 .prettierrc，但不会从 ESLint 读取配置

正是因为这个原因，在使用默认格式化快捷键alt + ctrl + f格式化时，只会读取 prettier，不会去读取你的项目 eslint 配置文件，

当两者混用时(安装了这 eslint 和 prettier 插件)，那么就在 eslint.js文件中添加上这一句

rules:{
  "prettier/prettier": ["error", {"singleQuote": true, "parser": "flow"}],
}

关于 <script> 和 <style> 中的代码初次缩进问题
vscode 中的的默认规则是缩进这两部分其中的内容,原因来自于开发者投票，说实话我很不认可这投票，不过为了迎合 vscode 的 alt + shift +f 格式化代码的规则，不得不妥协我的规范。

缩进的 .eslintrc.js配置如下（文档在这）

module.exports = {
  ...
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  ...
  rules: {
    indent: 'off',
    'vue/script-indent': [
      'error',
      2,
      {
        baseIndent: 1,
        switchCase: 1,
        ignores: []
      }
    ],
  }
}

以下是 <script> 和 <style> 标签缩进与未缩进的example 对比

缩进 ：

<script>
  import { defineComponent, computed } from 'vue';
  import { useStore } from 'vuex';
  export default defineComponent({
    name: 'App',
    setup() {
      const store = useStore();
      const greyMode = computed(() => store.state.app.greyMode);
      return {
        greyMode
      };
    }
  });
</script>

<style>
  .size {
    min-width: $minWidth;
    width: 100%;
    height: 100%;
  }
</style>
不缩进

<script>
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';
export default defineComponent({
  name: 'App',
  setup() {
    const store = useStore();
    const greyMode = computed(() => store.state.app.greyMode);
    return {
      greyMode
    };
  }
});
</script>

<style>
.size {
  min-width: $minWidth;
  width: 100%;
  height: 100%;
}
</style>
1. .prettierrc 配置文件
使用 .prettierrc (✔)格式文件，vscode 会给出可用的配置提示，不要使用 js 格式,例如.prettierrc.js(×)

.prettierrc 这种类型文件其实就是 json 格式，所以记住

json格式，vscode能给出可用配置项提示

{
  "useTabs": false,
  "tabWidth": 2,
  "endOfLine": "auto",
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "proseWrap": "preserve",
  "arrowParens": "always",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "ignorePath": ".prettierignore",
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "requireConfig": false,
  "trailingComma": "none",
  "vueIndentScriptAndStyle": true
}

2. eslint.js 配置文件
细心的同学发现了 , 不是说 json 格式有智能提示吗？eslint 配置文件为什么使用的是 js 文件格式。

这是因为,我需要根据当前是 dev 环境还是 prod 环境，去做校验，比如 dev 环境允许 console.log()代码的存在，prod 环境，就不允许，接下来的示例中就用到了 变量 process.env.NODE_ENV

也正是因为 js 文件中含有变数，编辑器是不可能知道里面会有什么东西，所以无法给出提示。

// "off"或 0 - 关闭规则
// "warn"或 1 - 开启规则， 使用警告级别的错误： warn(不会导致程序退出)
// "error"或 2 - 开启规则， 使用错误级别的错误： error(当被触发的时候， 程序会退出)
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
  },
  // 自定义rules
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'prettier/prettier': ['error', { singleQuote: true, parser: 'flow' }],
    'vue/no-unused-components': 'off',
    'vue/no-unused-vars': 'off',
    'vue/no-multiple-template-root': 'off',
    'vue/max-attributes-per-line': [
      2,
      {
        singleline: 10,
        multiline: {
          max: 2,
          allowFirstLine: false,
        },
      },
    ],
    'vue/singleline-html-element-content-newline': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    'vue/html-closing-bracket-newline': 'off',
    'vue/name-property-casing': ['error', 'PascalCase'],
    'vue/no-v-for-template-key-on-child': 'off',
    indent: 'off',
    'vue/script-indent': [
      'error',
      2,
      {
        baseIndent: 1,
        switchCase: 1,
        ignores: [],
      },
    ],
    'comma-dangle': 'off',
    quotes: [
      'error',
      'single',
      {
        avoidEscape: true,
        allowTemplateLiterals: true,
      },
    ],
    semi: ['error', 'always'],
    'semi-spacing': [
      'error',
      {
        before: false,
        after: true,
      },
    ],
  },
}

其他可能遇到的问题
cant't find module eslint-plugin-vue 解决办法：降低 "eslint-plugin-vue": "^5.2.3", 版本
delete ⏎ prettier/prettier 解决办法：添加配置rules:{'prettier/prettier': ['error', { endOfLine: 'auto' }]}