VSCODE Vue 开发配置

.editorconfig

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

# Use 4 spaces for the Python files
[*.py]
indent_size = 4
max_line_length = 80

# The JSON files contain newlines inconsistently
[*.json]
insert_final_newline = ignore

# Minified JavaScript files shouldn't be changed
[**.min.js]
indent_style = ignore
insert_final_newline = ignore

# Makefiles always use tabs for indentation
[Makefile]
indent_style = tab

# Batch files use tabs for indentation
[*.bat]
indent_style = tab

[*.md]
trim_trailing_whitespace = false

.eslintrc.js

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module',
  },
  env: {
    browser: true,
  },
  // ignore global vars
  globals: {
    vm: true,
    DDLogin: true,
    window: true,
  },
  extends: 'airbnb-base',
  // required to lint *.vue files
  plugins: ['html'],
  // check if imports actually resolve
  settings: {
    'import/resolver': {
      webpack: {
        config: './build/webpack.base.conf.js',
      },
    },
  },
  // add your custom rules here
  rules: {
    'object-curly-newline': 'off',
    'consistent-return': 'off',
    'no-nested-ternary': 'off',
    'import/first': 'off',
    'no-unused-vars': [
      'warn',
      {
        vars: 'all',
        args: 'after-used',
        ignoreRestSiblings: false,
      },
    ],
    // don't require .vue extension when importing
    'import/extensions': [
      'error',
      'always',
      {
        js: 'never',
        vue: 'never',
      },
    ],
    // disallow reassignment of function parameters
    // disallow parameter object manipulation except for specific exclusions
    'no-param-reassign': [
      'error',
      {
        props: true,
        ignorePropertyModificationsFor: [
          'state', // for vuex state
          'acc', // for reduce accumulators
          'e', // for e.returnvalue
        ],
      },
    ],
    // allow optionalDependencies
    'import/no-extraneous-dependencies': [
      'error',
      {
        optionalDependencies: ['test/unit/index.js'],
      },
    ],
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // Severity should be one of the following: 0 = off, 1 = warn, 2 = error
    // allow console in debug mode, but will be auto removed in production by webpack
    'no-console': [
      'error',
      {
        allow: ['warn', 'error', 'log'],
      },
    ],
    // 箭头函数体只有一个参数时，可以省略圆括号。其它任何情况，参数都应被圆括号括起来。该规则强制箭头函数中圆括号的使用的一致性。
    'arrow-parens': [
      0,
      'as-needed',
      {
        requireForBlockBody: true,
      },
    ],
    'implicit-arrow-linebreak': ['error', 'beside'],
    // TODO
    'no-param-reassign': 0,
    // 去除注释的最大长度限制
    'max-len': [
      'error',
      {
        ignoreComments: true,
        ignoreStrings: true,
        code: 200,
      },
    ],
    'import/prefer-default-export': 0,
    'import/extensions': 0,
    // 转义相关：https://eslint.org/docs/rules/no-useless-escape#disallow-unnecessary-escape-usage-no-useless-escape
    'no-useless-escape': 0,
    'func-names': 0,
    // 处理 i++ 规则， qu https://eslint.org/docs/rules/no-plusplus
    'no-plusplus': [
      'error',
      {
        allowForLoopAfterthoughts: true,
      },
    ],
    'no-underscore-dangle': [0],
    'operator-linebreak': 0,
    'implicit-arrow-linebreak': 0,
    'function-paren-newline': 0,
    'no-restricted-globals': 0,
    'space-before-function-paren': 0,
    'prefer-destructuring': 0,
  },
};

jsconfig.js

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "_c/*": ["src/components/*"]
    }
  },
  "exclude": ["dist"]
}

vscode插件本地配置.md

安装插件Path Autocomplete,这个插件可以让webpack配置的别名可以提示文件夹内容

{
  "path-autocomplete.pathMappings": {
    "@": "${folder}/src",
    "_c": "${folder}/src/components"
  },
}

vscode插件配置.md

这里是和eslint,vetur的配置

{
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "vetur.validation.template": false,
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned",
      "wrap_line_length": 80
    },
    "prettyhtml": {
      "printWidth": 80,
      "singleQuote": false
    }
  }
}

需要的第三方包

eslint-config-airbnb-base  // airbnb 标准
eslint-import-resolver-webpack // 通过webpack的config文件来解决地址别名问题