vscode eslint .vue中提示

[5Mi]

• 安装eslint 插件

• npm install --save-dev eslint eslint-plugin-vue -g

• vscode设置

  "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
          "language": "html",
          "autoFix": true
      },
      {
          "language": "vue",
          "autoFix": true
      }
  ],
  //配合保存时根据eslint规则 format
  "eslint.options": {
      "plugins": [
          // "html"  html的话需在项目中安装eslint-plugin-html
          "vue"
      ]
  },
  "eslint.autoFixOnSave": true,

• .eslintrc.js中

  // required to lint *.vue files
  extends: ['plugin:vue/essential'...],
  plugins: [
  // "html" html的话需在项目中安装eslint-plugin-html
  'vue',
  ],

• eslint-plugin-vue

  ---

eslint 一般所需package babel-eslint eslint eslint-config-standard eslint-friendly-formatter eslint-plugin-html eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue

[5Mi]

.eslintrc.js

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

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
    es6: true
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential', 
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    // 'standard'
    //使用eslint默认推荐
    'eslint:recommended'
  ],
  // required to lint *.vue files
  plugins: [
    'vue',
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

    "quotes":["error", "single"],
    // "semi":[2,'always'],
    "newline-per-chained-call":["warn",{"ignoreChainWithDepth": 3}],
    "no-console": "off",
    "default-case": "error",
    "no-eval": "error",
    "no-empty-function":"error",
    "no-unused-vars": 2,
    "no-multi-spaces": "warn",
    "no-multi-str": "warn",
    "no-self-compare": "warn",
    "no-unmodified-loop-condition": "error", //禁用一成不变的循环条件
    "no-delete-var": "off",
    "no-use-before-define": ["error", {functions: false}],
    "brace-style": "warn", //一致的大括号风格
    "new-cap": "warn",
    "no-multiple-empty-lines": ["warn",{max: 3}], 
    "no-unused-labels": "off",
    "no-useless-escape": "off", //禁用不必要的转义
    "space-infix-ops": ["warn", {"int32Hint": false}],
    "comma-spacing": "warn",
    "curly": "warn",
    "operator-linebreak": "error",
    "block-spacing": "warn",
    "camelcase": "warn",
    "comma-dangle": "off",
    "comma-style": "warn",
    "dot-location": "warn",
    "key-spacing": "warn",
  }
}

[5Mi]

vue-cli 3 config vue.config.js

// const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const path = require('path')
const runtimeChunkName = 'runtime~manifest'
const bundleAnalyzerReport = process.env.npm_config_report

module.exports = {
  // This is preferred over manually tapping into specific loaders using chainWebpack, because these options need to be applied in multiple locations where the corresponding loader is used.
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "@/assets/scss/_variables.scss";
        @import "@/assets/scss/_mixin.scss";`
      }
    }
  },
  // configureWebpack: config => {
  //   if (process.env.NODE_ENV === 'production') {
  //     // mutate config for production...
  //   } else {
  //     // mutate for development...
  //   }
  // },
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // mutate config for production...
      config.optimization
        .runtimeChunk({
          name: runtimeChunkName
        })
        .splitChunks({
          cacheGroups: {
            vendors: {
              name: 'chunk-vendors',
              test: /[\\\/]node_modules[\\\/]/,
              priority: -10,
              chunks: 'initial'
            },
            common: {
              name: 'chunk-common',
              minChunks: 2,
              priority: -20,
              // all
              chunks: 'all',
              reuseExistingChunk: true
            }
          }
        })

      config
        .plugin('inlineManifest')
        .after('html')
        .use(HtmlWebpackInlineSourcePlugin)
        .end()
        .plugin('html')
        .tap(args => {
          args[0].productLog = true
          // Inline all files which names start with “runtime~” and end with “.js”.
          // That’s the default naming of runtime chunks
          /* see https://developers.google.com/web/fundamentals/performance/webpack/use-long-term-caching Inline webpack runtime to save an extra HTTP request */
          args[0].inlineSource = 'runtime~.+\\.js'
          return args
        })

      // 移除 prefetch 插件
      config.plugins.delete('prefetch')

      //vue-cli-service build --report 已有此功能
      // if (bundleAnalyzerReport) {
      //   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
      //     .BundleAnalyzerPlugin
      //   config.plugin('BundleAnalyzerPlugin').use(BundleAnalyzerPlugin)
      // }
    } else {
      // mutate for development...
    }
  }
}