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插件