【eslint】规则问题汇总，兼容prettier函数后空格等规则

一、eslint 规则

1、【no-new】Do not use 'new' for side effects.禁止使用new不将结果对象分配给变量的关键字的构造函数调用来维护一致性和约定。
使用new构造函数的目标通常是创建特定类型的对象并将该对象存储在变量中 。

/*eslint no-new: "error"*/

// Bad
new Thing();

// Good
var thing = new Thing();
Thing();

2、【import/extensions】Unexpected use of file extension "js" for.../Missing file extension for...

        eslint-plugin-import插件提供的能力，用于校验es6的import规则。禁止指定文件引用时带文件扩展名。

/* import/extensions */

// Bad
import { desktopApiRoutePrefix } from '@common/api_module/api_common.js';

//Good
import { desktopApiRoutePrefix } from '@common/api_module/api_common';

 

.eslintrc.js 

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    parser: "babel-eslint"
  },
  env: {
    browser: true,
    node: true
  },
  extends: 'standard',
  globals: {
    __static: true,
    _: true,
    ERP_CLENT: true,
    deleteObjProperty: true,
    $db: true,
    getVersion: true,
  },
  plugins: [
    'html'
  ],
    rules: {
        // eslint-plugin-import插件提供的能力
        'import/extensions': [2, "never", { "web.js": "never", "json": "never" }],
        "no-new": 'off',
        'no-param-reassign': 'off',
        // 允许在开发环境添加debugger
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        indent: ['error', 2],
        'linebreak-style': ['error', 'unix'],
        quotes: ['error', 'single'],
        semi: ['error', 'always'],
        camelcase: 'off',
        'comma-dangle': ['error', 'never'],
        'global-require': 'off',
        'no-trailing-spaces': 'off',
        'eol-last': 'off',
        'max-len': ['error', { code: 160 }],
        'arrow-parens': ['error', 'as-needed'],
        'vue/script-indent': ['off'],
        'vue/html-indent': ['off'],
        'vue/require-component-is': 'off',
        'vue/html-closing-bracket-newline': ['off'],
        'vue/max-attributes-per-line': ['off']
    }
}

二、vscode及prettier配置

vs code settings.json

prettier兼容eslint函数后空格的关键，指定"vetur.format.defaultFormatter.js"和"vetur.format.defaultFormatter.ts"，后配置 "javascript.format.insertSpaceBeforeFunctionParenthesis"和"typescript.format.insertSpaceBeforeFunctionParenthesis"才会生效

{
  "editor.fontSize": 18,
  "editor.formatOnSave": true,
  "editor.detectIndentation": false,
  // 设置文件默认的格式化工具为 Prettier - Code formatter
  // 当文件存在多个 VS Code 的 formatter 插件对同一个文件类型进行格式化时，需要手动选择 prettier-vscode 即 Prettier - Code formatter 插件
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    // 关闭编辑器对 js 文件的格式化，交给 ESLint 来做格式化，否则会格式化两次
    "editor.formatOnSave": false
  },
  // Eslint 插件配置，详见 https://github.com/microsoft/vscode-eslint
  // Enables auto fix on save. Please note auto fix on save is only available if VS Code's files.autoSave is either off, onFocusChange or onWindowChange. It will not work with afterDelay.
  "eslint.alwaysShowStatus": true,
  // An array of language ids which should be validated by ESLint
  "eslint.validate": ["html", "javascript", "vue", "javascriptreact"],
  "vetur.format.enable": true,
  "vetur.validation.template": false,
  // javascript
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // typescript
  "vetur.format.defaultFormatter.ts": "vscode-typescript",
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": true,
      "singleQuote": true,
      "trailingComma": "none",
      "bracketSpacing": true,
      "insertSpaceBeforeFunctionParenthesis": true
    }
  },
  "fileheader.LastModifiedBy": "zoe",
  "fileheader.tpl": "/*\\r\\n * @Author: {author}\\r\\n * @Email: liyan.xiao@medbanks.cn\\r\\n * @Date: {createTime}\\r\\n * @Last Modified by: {lastModifiedBy}\\r\\n * @Last Modified time: {updateTime}\\r\\n * @Description: Description\\r\\n * @Route: Route\\r\\n */\\r\\n",
  "fileheader.Author": "zoe",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "explorer.confirmDragAndDrop": false,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "java.configuration.checkProjectSettingsExclusions": false,
  "java.errors.incompleteClasspath.severity": "ignore",
  "window.zoomLevel": 0,
  "explorer.confirmDelete": false,
  "editor.fontLigatures": false,
  // "files.autoSave": "onFocusChange",
  "files.autoSave": "off",
  "editor.wordWrap": "on",
  "[json]": {
    "editor.quickSuggestions": {
      "strings": true
    },
    "editor.suggest.insertMode": "replace",
    "gitlens.codeLens.scopes": ["document"]
  },
  "json.schemas": [],
  "editor.tabSize": 2,
  "workbench.editor.untitled.hint": "hidden",
  "javascript.preferences.quoteStyle": "single",
  "typescript.preferences.quoteStyle": "single",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

三、配套扩展