vscode配置setting和eslintrc.js

eslintrc.js

module.exports = {
  root: true,
  // 此项指定环境的全局变量
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  // 此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  extends: [
    'plugin:vue/essential'
  ],
  plugins: [
    'vue'
  ],
  'settings': {
      'import/resolver': {
          'webpack': {
              'config': 'build/webpack.base.conf.js'
          }
      }
  },
  /** vue文件禁用indent规则 */
  overrides:[
    {
      'files':['*.vue'],
      'rules':{
        'indent':'off',
        'vue/no-use-v-if-with-v-for': 'off',
        'vue/no-unused-components': 'off'
      }
    }
  ],
  rules: {
    /** 禁用 console */
    'no-console': 'off',
    /** 禁用 debugger */
    'no-debugger': 'off',
    /** 要求使用 === 和 !== */
    'eqeqeq': ['error', "always", {"null": "ignore"}],
    /** 要求或禁止使用分号代替 ASI,即禁用行位使用分号 */
    'semi': ['error', 'never'],
    /** 强制分号之前和之后使用一致的空格 */
    'semi-spacing': ['error', {'before': false,'after': true}],
    /** 大括号风格要求,用来描述大括号相对控制语句和代码块的位置 */
    'brace-style': ['error', '1tbs', {'allowSingleLine': true}],
    /** 强制在花括号中使用一致的空格 */
    'object-curly-spacing': ['error', 'always'],
    /** 禁止或强制在括号内使用空格 */
    'array-bracket-spacing': ['error', 'never'],
    /** 要求或禁止语句块之前的空格 */
    'space-before-blocks': ['error', 'always'],
    /** 要求或禁止函数圆括号之前有一个空格 */
    'space-before-function-paren': ['error', 'never'],
    /** 禁止或强制圆括号内的空格 */
    'space-in-parens': ['error', 'never'],
    /** 确保中缀运算符周围有空格 */
    'space-infix-ops': ['error', {'int32Hint': false}],
    /** 要求或禁止在一元操作符之前或之后存在空格 */
    'space-unary-ops': ['error', {'words': true,'nonwords': false}],
    /** 要求或禁止在注释前有空白 */
    'spaced-comment': ['error', 'always', {'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']}],
    /** 强制模板字符串中空格的使用 */
    'template-curly-spacing': ['error', 'never'],
    /** 要求调用 isNaN()检查 NaN */
    'use-isnan': 'error',
    /** 强制 typeof 表达式与有效的字符串进行比较  */
    'valid-typeof': 'error',
    /** 需要把立即执行的函数包裹起来 */
    'wrap-iife': ['error', 'any'],
    /** 强制在 yield* 表达式中 * 周围使用空格 */
    'yield-star-spacing': ['error', 'after'],
    /** 强制 generator 函数中 * 号周围有空格 */
    'generator-star-spacing': ['error', 'after'],
    /** 要求或禁止块内填充 */
    'padded-blocks': ['error', 'never'],
    /** 强制操作符使用一致的换行符风格 */
    'operator-linebreak': ['error', 'after', {'overrides': {'?': 'before',':': 'before'}}],
    /** 强制函数中的变量在一起声明或分开声明 */
    'one-var': ['error', 'never'],
    /** 要求构造函数首字母大写 */
    'new-cap': ['error', {'newIsCap': true,'capIsNew': false}],
    /** 要求调用无参构造函数时带括号 */
    'new-parens': 'error',
    /** 强制关键字周围空格的一致性 */
    'keyword-spacing': ['error', {'before': true,'after': true}],
    /** 强制在对象字面量的键和值之间使用一致的空格 */
    'key-spacing': ['error', {'beforeColon': false,'afterColon': true}],
    /** 强制在 JSX 属性中使用一致的单引号或双引号 */
    'jsx-quotes': ['error', 'prefer-single'],
    /** 强制使用一致的缩进 */
    'indent': ['error', 2, {'SwitchCase': 1}],
    /** 强制回调错误处理 */
    // 'handle-callback-err': ['error', '^(err|error)$'],
    /** 要求或禁止文件末尾保留一行空行 */
    'eol-last': ['error', 'always'],
    /** 强制在点号之前或之后换行 */
    'dot-location': ['error', 'property'],
    /** 要求遵循大括号约定 */
    'curly': ['error', 'multi-line'],
    /** 验证构造函数中 super() 的调用 */
    'constructor-super': 'error',
    /** 逗号风格 (comma-style) */
    'comma-style': ['error', 'last'],
    /** 强制在逗号周围使用空格 */
    'comma-spacing': ['error', {'before': false,'after': true}],
    /** 要求或禁止使用拖尾逗号 */
    'comma-dangle': ['error', 'never'],
    /** 禁止或强制在代码块中开括号前和闭括号后有空格  */
    'block-spacing': ['error', 'always'],
    /** 要求箭头函数的箭头之前或之后有空格 */
    'arrow-spacing': ['error', {'before': true,'after': true}],
    /** 要求或禁止在函数标识符和其调用之间有空格 */
    'func-call-spacing': ['error', 'never'],
    /****************************************** no 配置 ********************************************/
    /** 禁止使用 Array 构造函数 */
    'no-array-constructor': 'error',
    /** 禁用 arguments.caller 或 arguments.callee */
    'no-caller': 'error',
    /** 禁止修改类声明的变量 */
    'no-class-assign': 'error',
    /** 禁止条件表达式中出现赋值操作符 */
    'no-cond-assign': ['error','always'],
    /** 禁止修改 const 声明的变量 */
    'no-const-assign': 'error',
    /** 禁止在正则表达式中使用控制字符 */
    'no-control-regex': 'error',
    /** 禁止删除变量 */
    'no-delete-var': 'error',
    /** 禁止 function 定义中出现重名参数 */
    'no-dupe-args': 'error',
    /** 禁止类成员中出现重复的名称 */
    'no-dupe-class-members': 'error',
    /** 禁止对象字面量中出现重复的 key */
    'no-dupe-keys': 'error',
    /** 禁止出现重复的 case 标签 */
    'no-duplicate-case': 'error',
    /** 禁止在正则表达式中出现空字符集 */
    'no-empty-character-class': 'error',
    /** 禁止使用空解构模式 */
    'no-empty-pattern': 'error',
    /** 禁止对 catch 子句的参数重新赋值 */
    'no-ex-assign': 'error',
    /** 禁止扩展原生对象 */
    'no-extend-native': 'error',
    /** 禁止不必要的函数绑定 */
    'no-extra-bind': 'error',
    /** 禁止不必要的布尔类型转换 */
    'no-extra-boolean-cast': 'error',
    /** 禁止冗余的括号 */
    'no-extra-parens': ['error', 'functions'],
    /** 禁止 case 语句落空 */
    'no-fallthrough': 'error',
    /** 禁止浮点小数 */
    'no-floating-decimal': 'error',
    /** 禁止对 function 声明重新赋值  */
    'no-func-assign': 'error',
    /** 禁止在嵌套的语句块中出现变量或 function 声明 */
    'no-inner-declarations': ['error', 'functions'],
    /** 禁止在 RegExp 构造函数中出现无效的正则表达式 */
    'no-invalid-regexp': 'error',
    /** 禁止不规则的空白 */
    'no-irregular-whitespace': 'error',
    /** 禁用迭代器 */
    'no-iterator': 'error',
    /** 禁用与变量同名的标签 */
    'no-label-var': 'error',
    /** 禁用标签语句 */
    'no-labels': ['error', {'allowLoop': false,'allowSwitch': false}],
    /** 禁用不必要的嵌套块 */
    'no-lone-blocks': 'error',
    /** 禁止使用 空格 和 tab 混合缩进 */
    'no-mixed-spaces-and-tabs': 'error',
    /** 禁止出现多个空格 */
    'no-multi-spaces': 'error',
    /** 禁止多行字符串 */
    'no-multi-str': 'error',
    /** 不允许多个空行  */
    'no-multiple-empty-lines': ['error', {'max': 1}],
    /** 禁止对原生对象或只读的全局对象进行赋值 */
    'no-global-assign': 'error',
    /** 禁止对关系运算符的左操作数使用否定操作符 */
    'no-unsafe-negation': 'error',
    /** 禁止使用 Object 构造函数 */
    'no-new-object': 'error',
    /** 不允许 new require */
    'no-new-require': 'error',
    /** 禁止 Symbolnew 操作符和 new 一起使用 */
    'no-new-symbol': 'error',
    /** 禁止原始包装实例 */
    'no-new-wrappers': 'error',
    /** 禁止将全局对象当作函数进行调用 */
    'no-obj-calls': 'error',
    /** 禁用八进制字面量 */
    'no-octal': 'error',
    /** 禁止在字符串字面量中使用八进制转义序列 */
    'no-octal-escape': 'error',
    /** 当使用 _dirname 和 _filename 时不允许字符串拼接 */
    'no-path-concat': 'error',
    /** 禁用__proto__ */
    'no-proto': 'error',
    /** 禁止重新声明变量 */
    'no-redeclare': 'error',
    /** 禁止正则表达式字面量中出现多个空格 */
    'no-regex-spaces': 'error',
    /** 禁止在返回语句中赋值 */
    'no-return-assign': ['error', 'except-parens'],
    /** 禁止自身赋值 */
    'no-self-assign': 'error',
    /** 禁止自身比较 */
    'no-self-compare': 'error',
    /** 不允许使用逗号操作符 */
    'no-sequences': 'error',
    /** 关键字不能被遮蔽 */
    'no-shadow-restricted-names': 'error',
    /** 禁用稀疏数组 */
    'no-sparse-arrays': 'error',
    /** 在构造函数中禁止在调用super()之前使用this或super */
    'no-this-before-super': 'error',
    /** 限制可以被抛出的异常 */
    'no-throw-literal': 'error',
    /** 禁用行尾空格 */
    'no-trailing-spaces': 'error',
    /** 禁用未声明的变量 */
    'no-undef': 'error',
    /** 不允许初始化变量值为 undefined */
    'no-undef-init': 'error',
    /** 禁止使用令人困惑的多行表达式 */
    'no-unexpected-multiline': 'error',
    /** 禁用一成不变的循环条件 */
    'no-unmodified-loop-condition': 'error',
    /** 禁止可以表达为更简单结构的三元操作符 */
    'no-unneeded-ternary': ['error', {'defaultAssignment': false}],
    /** 禁止在 return、throw、continue 和 break 语句之后出现不可达代码 */
    'no-unreachable': 'error',
    /** 禁止在 finally 语句块中出现控制流语句 */
    'no-unsafe-finally': 'error',
    /** 禁止未使用过的变量 */
    // 'no-unused-vars': ['error', {'vars': 'local','args': 'none'}],
    /** 禁用不必要的 .call() 和 .apply() */
    'no-useless-call': 'error',
    /** 禁止在对象中使用不必要的计算属性 */
    'no-useless-computed-key': 'error',
    /** 禁用不必要的构造函数 */
    'no-useless-constructor': 'error',
    /** 禁止属性前有空白 */
    'no-whitespace-before-property': 'error',
    /** 禁用 with 语句 */
    'no-with': 'error'
  }
}

setting.json

{
  "workbench.colorTheme": "Default Light+",
  "workbench.editor.enablePreviewFromQuickOpen": true,
  "workbench.editor.enablePreviewFromCodeNavigation": true,
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
  // ----------------
  // 括号线着色
  "editor.guides.bracketPairs": true,
  // 编辑器 括号着色
  "editor.bracketPairColorization.enabled": true,
  // 通过tab 自动补全联想
  "editor.suggest.preview": true,
  // 编译器字体大小
  "editor.fontSize": 16,
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化 
  "editor.formatOnSave": false,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
  // #每次保存的时候将代码按eslint格式进行修复
  //"eslint.autoFixOnSave": true,以弃用   改成下面的"editor.codeActionsOnSave"
  "editor.codeActionsOnSave": {
    // #每次保存的时候将代码按eslint格式进行修复
    "source.fixAll.eslint": true,
    "eslint.autoFixOnSave": true,
  },
  // 启用eslint作为格式化程序
  "eslint.format.enable": true,
  // 添加支持格式
  //autoFix默认开启，只需输入字符串数组即可
  "eslint.validate": [
    "javascript",
    "vue",
    "html"
  ],
  // v-for中是否必须使用key
  "vetur.validation.template": false,
  // #这个按用户自身习惯选择 ， html 使用 beautify
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 设置下面这组会执行prettier格式
  // "vetur.format.defaultFormatter.html": "prettyhtml",
  // "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatterOptions": {
    // "wrap_attributes": "force-aligned",
    "js-beautify-html": {
      // - auto: 仅在超出行长度时才对属性进行换行。
      // - force: 对除第一个属性外的其他每个属性进行换行。
      // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
      // - force-expand-multiline: 对每个属性进行换行。
      // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
      "wrap_attributes": "auto",
      // #vue组件中html代码格式化样式,可选
      // 折行长度
      "wrap_line_length": 200,
      // "end_with_newline": false,
      // "semi": true,
      "singleQuote": false
    },
    "prettier": {
      //设置分号
      "semi": false,
      //双引号变成单引号
      "singleQuote": false,
      //禁止随时添加逗号,这个很重要。找了好久
      "trailingComma": "none"
    }
  },
  // "explorer.confirmDelete": false,
  "diffEditor.ignoreTrimWhitespace": true,
  // "workbench.sideBar.location": "left",
  // "files.autoGuessEncoding": true,
  "editor.formatOnType": true,
  // "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  // "editor.suggest.snippetsPreventQuickSuggestions": false,
  // path-intellisense 自动路径补全
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  // svn 地址
  "svn.path": "D://svn//bin//svn.exe",
  // vue中js的格式化方式
  "[javascript]": {
    "editor.defaultFormatter": "Wscats.eno"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "explorer.confirmDelete": false
}