eslint 7.5.0如何支持 js 链操作符

Question

eslint 7.5.0如何支持 js 链操作符

mikechen

1.1k10167308

发布于
2021-10-08

更新于
2021-10-08

RT 在 vue 开发的时候参考
https://www.it1352.com/206735...
已经把 eslint 更新到 7.5.0 相关配置如下图但是就是不生效

vue.config.js

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')

function resolve(dir) {
return path.join(__dirname, dir)
}

const name = defaultSettings.title // page title

// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
// You can change the port by the following methods:
// port = 9528 npm run dev OR npm run dev --port = 9528
const port = process.env.port || process.env.npm_config_port || 9528 // dev port

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
/**
 * You will need to set publicPath if you plan to deploy your site under a sub path,
 * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
 * then publicPath should be set to "/bar/".
 * In most cases please use '/' !!!
 * Detail: https://cli.vuejs.org/config/#publicpath
 */
publicPath: './',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
  port: port,
  open: false,
  overlay: {
    warnings: false,
    errors: true
  },
  proxy: {
    '/': {
      target: process.env.VUE_APP_BASE_API,
      // target: 'http://xxxxxxx',
      ws: false,
      changeOrigin: true,
      pathRewrite: {
        '^/': '/'
      }
    }
  }
  // before: require('./mock/mock-server.js')
},
configureWebpack: {
  // provide the app's title in webpack's name field, so that
  // it can be accessed in index.html to inject the correct title.
  name: name,
  resolve: {
    alias: {
      '@': resolve('src'),
      '@crud': resolve('src/components/Crud'),
      '@components': resolve('src/components')
      // mock: resolve('mock')
    }
  }
},
chainWebpack(config) {
  // it can improve the speed of the first screen, it is recommended to turn on preload
  config.plugin('preload').tap(() => [
    {
      rel: 'preload',
      // to ignore runtime.js
      // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
      fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
      include: 'initial'
    }
  ])

  // when there are many pages, it will cause too many meaningless requests
  config.plugins.delete('prefetch')

  // set svg-sprite-loader
  config.module
    .rule('svg')
    .exclude.add(resolve('src/icons'))
    .end()
  config.module
    .rule('icons')
    .test(/\.svg$/)
    .include.add(resolve('src/icons'))
    .end()
    .use('svg-sprite-loader')
    .loader('svg-sprite-loader')
    .options({
      symbolId: 'icon-[name]'
    })
    .end()

  config.when(process.env.NODE_ENV !== 'development', config => {
    config
      .plugin('ScriptExtHtmlWebpackPlugin')
      .after('html')
      .use('script-ext-html-webpack-plugin', [
        {
          // `runtime` must same as runtimeChunk name. default is `runtime`
          inline: /runtime\..*\.js$/
        }
      ])
      .end()
    config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        libs: {
          name: 'chunk-libs',
          test: /[\\/]node_modules[\\/]/,
          priority: 10,
          chunks: 'initial' // only package third parties that are initially dependent
        },
        elementUI: {
          name: 'chunk-elementUI', // split elementUI into a single package
          priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
          test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
        },
        commons: {
          name: 'chunk-commons',
          test: resolve('src/components'), // can customize your rules
          minChunks: 3, //  minimum common number
          priority: 5,
          reuseExistingChunk: true
        }
      }
    })
    // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
    config.optimization.runtimeChunk('single')
  })
}
}

.eslint.js

module.exports = {
root: true,
parserOptions: {
  parser: 'babel-eslint',
  ecmaVersion: 2020,
  sourceType: 'module'
},
env: {
  browser: true,
  node: true,
  es6: true,
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],

// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
rules: {
  "vue/max-attributes-per-line": [2, {
    "singleline": 10,
    "multiline": {
      "max": 1,
      "allowFirstLine": false
    }
  }],
  "vue/singleline-html-element-content-newline": "off",
  "vue/multiline-html-element-content-newline":"off",
  "vue/name-property-casing": ["error", "PascalCase"],
  "vue/no-v-html": "off",
  'accessor-pairs': 2,
  'arrow-spacing': [2, {
    'before': true,
    'after': true
  }],
  'block-spacing': [2, 'always'],
  'brace-style': [2, '1tbs', {
    'allowSingleLine': true
  }],
  'camelcase': [0, {
    'properties': 'always'
  }],
  'comma-dangle': [2, 'never'],
  'comma-spacing': [2, {
    'before': false,
    'after': true
  }],
  'comma-style': [2, 'last'],
  'constructor-super': 2,
  'curly': [2, 'multi-line'],
  'dot-location': [2, 'property'],
  'eol-last': 2,
  'eqeqeq': ["error", "always", {"null": "ignore"}],
  'generator-star-spacing': [2, {
    'before': true,
    'after': true
  }],
  'handle-callback-err': [2, '^(err|error)$'],
  'indent': [2, 2, {
    'SwitchCase': 1
  }],
  'jsx-quotes': [2, 'prefer-single'],
  'key-spacing': [2, {
    'beforeColon': false,
    'afterColon': true
  }],
  'keyword-spacing': [2, {
    'before': true,
    'after': true
  }],
  'new-cap': [2, {
    'newIsCap': true,
    'capIsNew': false
  }],
  'new-parens': 2,
  'no-array-constructor': 2,
  'no-caller': 2,
  'no-console': 'off',
  'no-class-assign': 2,
  'no-cond-assign': 2,
  'no-const-assign': 2,
  'no-control-regex': 0,
  'no-delete-var': 2,
  'no-dupe-args': 2,
  'no-dupe-class-members': 2,
  'no-dupe-keys': 2,
  'no-duplicate-case': 2,
  'no-empty-character-class': 2,
  'no-empty-pattern': 2,
  'no-eval': 2,
  'no-ex-assign': 2,
  'no-extend-native': 2,
  'no-extra-bind': 2,
  'no-extra-boolean-cast': 2,
  'no-extra-parens': [2, 'functions'],
  'no-fallthrough': 2,
  'no-floating-decimal': 2,
  'no-func-assign': 2,
  'no-implied-eval': 2,
  'no-inner-declarations': [2, 'functions'],
  'no-invalid-regexp': 2,
  'no-irregular-whitespace': 2,
  'no-iterator': 2,
  'no-label-var': 2,
  'no-labels': [2, {
    'allowLoop': false,
    'allowSwitch': false
  }],
  'no-lone-blocks': 2,
  'no-mixed-spaces-and-tabs': 2,
  'no-multi-spaces': 2,
  'no-multi-str': 2,
  'no-multiple-empty-lines': [2, {
    'max': 1
  }],
  'no-native-reassign': 2,
  'no-negated-in-lhs': 2,
  'no-new-object': 2,
  'no-new-require': 2,
  'no-new-symbol': 2,
  'no-new-wrappers': 2,
  'no-obj-calls': 2,
  'no-octal': 2,
  'no-octal-escape': 2,
  'no-path-concat': 2,
  'no-proto': 2,
  'no-redeclare': 2,
  'no-regex-spaces': 2,
  'no-return-assign': [2, 'except-parens'],
  'no-self-assign': 2,
  'no-self-compare': 2,
  'no-sequences': 2,
  'no-shadow-restricted-names': 2,
  'no-spaced-func': 2,
  'no-sparse-arrays': 2,
  'no-this-before-super': 2,
  'no-throw-literal': 2,
  'no-trailing-spaces': 2,
  'no-undef': 2,
  'no-undef-init': 2,
  'no-unexpected-multiline': 2,
  'no-unmodified-loop-condition': 2,
  'no-unneeded-ternary': [2, {
    'defaultAssignment': false
  }],
  'no-unreachable': 2,
  'no-unsafe-finally': 2,
  'no-unused-vars': [2, {
    'vars': 'all',
    'args': 'none'
  }],
  'no-useless-call': 2,
  'no-useless-computed-key': 2,
  'no-useless-constructor': 2,
  'no-useless-escape': 0,
  'no-whitespace-before-property': 2,
  'no-with': 2,
  'one-var': [2, {
    'initialized': 'never'
  }],
  'operator-linebreak': [2, 'after', {
    'overrides': {
      '?': 'before',
      ':': 'before'
    }
  }],
  'padded-blocks': [2, 'never'],
  'quotes': [2, 'single', {
    'avoidEscape': true,
    'allowTemplateLiterals': true
  }],
  'semi': [2, 'never'],
  'semi-spacing': [2, {
    'before': false,
    'after': true
  }],
  'space-before-blocks': [2, 'always'],
  'space-before-function-paren': [2, 'never'],
  'space-in-parens': [2, 'never'],
  'space-infix-ops': 2,
  'space-unary-ops': [2, {
    'words': true,
    'nonwords': false
  }],
  'spaced-comment': [2, 'always', {
    'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
  }],
  'template-curly-spacing': [2, 'never'],
  'use-isnan': 2,
  'valid-typeof': 2,
  'wrap-iife': [2, 'any'],
  'yield-star-spacing': [2, 'both'],
  'yoda': [2, 'never'],
  'prefer-const': 2,
  'no-debugger': process.env.NODE_ENV !== 'development' ? 2 : 0,
  'object-curly-spacing': [2, 'always', {
    objectsInObjects: false
  }],
  'array-bracket-spacing': [2, 'never']
}
}

babel.config.js

module.exports = {
presets: [
  // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
  '@vue/cli-plugin-babel/preset'
],
plugins: ['@babel/plugin-proposal-optional-chaining'],
env: {
  development: {
    // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
    // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
    // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
    plugins: [
      'dynamic-import-node',
      '@babel/plugin-proposal-optional-chaining'
    ]
  }
}
}

eslint 前端 javascript

阅读 3.3k

1 个回答

然后去远足

✓ 已被采纳

因为你不是直接用的 ESLint，而是通过 babel-eslint 调用的，你得先让 babel 认识这个语法。

先添加 @babel/plugin-proposal-optional-chaining 这个插件，怎么添加可以自己搜一下。

撰写回答