zoukankan      html  css  js  c++  java
  • 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插件

  • 相关阅读:
    PNG文件格式具体解释
    opencv2对读书笔记——使用均值漂移算法查找物体
    Jackson的Json转换
    Java实现 蓝桥杯VIP 算法训练 装箱问题
    Java实现 蓝桥杯VIP 算法训练 装箱问题
    Java实现 蓝桥杯VIP 算法训练 单词接龙
    Java实现 蓝桥杯VIP 算法训练 单词接龙
    Java实现 蓝桥杯VIP 算法训练 方格取数
    Java实现 蓝桥杯VIP 算法训练 方格取数
    Java实现 蓝桥杯VIP 算法训练 单词接龙
  • 原文地址:https://www.cnblogs.com/adbg/p/14387087.html
Copyright © 2011-2022 走看看