Vue cli3 + Vscode + eslint检测工具 + Prettier格式代码

1、vscode下载Vetur 和 Prettier - Code formatter插件

2、修改.eslintrc.js，新增如下，放哪里无所谓

// required to lint *.vue files
  plugins: [
    'vue'
  ],

3、根目录新建vue.config.js

module.exports = {
  // 选项
  // 基本路径
  publicPath: './',
  // 构建时的输出目录
  outputDir: 'dist',
  // 放置静态资源的目录
  assetsDir: 'static',
  // html 的输出路径
  indexPath: 'index.html',
  // 文件名哈希
  filenameHashing: true,
  // 用于多页配置，默认是 undefined
  pages: {
    index: {
      // page 的入口文件
      entry: 'src/main.js',
      // 模板文件
      template: 'public/index.html',
      // 在 dist/index.html 的输出文件
      filename: 'index.html',
      // 当使用页面 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
  },
  // 是否在保存的时候使用 `eslint-loader` 进行检查。
  lintOnSave: true,
  // 是否使用带有浏览器内编译器的完整构建版本
  runtimeCompiler: false,
  // babel-loader 默认会跳过 node_modules 依赖。
  transpileDependencies: [],
  // 是否为生产环境构建生成 source map？
  productionSourceMap: true,
  // 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
  // crossorigin: '',
  // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。
  integrity: false,
  // 调整内部的 webpack 配置
  configureWebpack: () => {}, // (Object | Function)
  chainWebpack: () => {},
  // 配置 webpack-dev-server 行为。
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
    proxy: {
      '/api': {
        target: 'http://app.rmsdmedia.com',
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/foo': {
        target: '<other_url>'
      }
    }, // string | Object
    before: () => {}
  },
  // CSS 相关选项
  css: {
    // 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
  // 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
  // 在多核机器下会默认开启。
  parallel: require('os').cpus().length > 1,
  // PWA 插件的选项。
  // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md
  pwa: {},
  // 三方插件的选项
  pluginOptions: {
    // ...
  }
}

 

4、根目录新建.prettierrc.js

module.exports = {
  singleQuote: true, // 平常模式使用单引号
  tabWidth: 2, // tab 为2个空格长度
  semi: false, // 不需要分号
  printWidth: 120 // 单行长度
}

5、修改vscode设置，settings.json

{
    "files.autoSave": "afterDelay",
    "files.associations": {
      "*.ejs": "html",
      "*.js": "javascript",
      "*.ts": "typescript",
      "*.vue": "vue"
    },
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
      "vue-html": "html",
      "vue": "html"
    },
    "window.zoomLevel": 1,
    "cssrem.rootFontSize": 75,
    "workbench.editor.enablePreview": false, //打开文件不覆盖
    "search.followSymlinks": false, //关闭rg.exe进程
    "editor.minimap.enabled": false, //关闭快速预览
    "editor.lineNumbers": "on", //开启行数提示
    "editor.quickSuggestions": {
      //开启自动显示建议
      "other": true,
      "comments": true,
      "strings": true
    },
    "editor.tabSize": 2, //制表符符号eslint
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
    "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
    "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatterOptions": {
      "wrap_attributes": "force-aligned" //属性强制折行对齐
    },
    "eslint.format.enable": true,
    // "workbench.activityBar.visible": false,
    "workbench.sideBar.location": "left",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.formatOnSave": true, //每次保存自动格式化
    // 自动修复
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    // autoFix默认开启，只需输入字符串数组即可
    "eslint.validate": ["javascript", "vue", "html"],
    // 背景
    "background.enabled": true, //插件是否启用
    "background.useDefault": false, //是否使用默认图片
    "background.customImages": [
      "file:///E:/vscode背景图片/timg.jfif"
    ],
    "background.style": {
      "content": "''",
      "pointer-events": "none",
      "position": "absolute",
      "z-index": "99999",
      "width": "100%",
      "height": "100%",
      "background-position": "center",
      "background-repeat": "no-repeat",
      "background-size": "100%,100%",
      "opacity": 0.1
    },
    "workbench.statusBar.visible": true,
    "workbench.activityBar.visible": true,
    "eslint.codeAction.showDocumentation": {
      "enable": true
    },
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "eslint.workingDirectories": [
      ".eslintrc.js",
      {
        "mode": "auto"
      }
    ],
  }

加了vscode的背景图，"file:///E:/vscode背景图片/timg.jfif"  背景路径，需要的可以下载background插件