项目初始化相关配置

一、.editorconfig文件

1、需要先安装EditorConfig for VS Code插件
2、作用：有助于为跨各种编辑器和 IDE 处理同一项目的多个开发人员保持一致的编码风格
3、https://editorconfig.org/

# 告诉EditorConfig插件，这是根文件，不用继续往上查找
root = true

[*.{js,jsx,ts,tsx,vue}] # 匹配js,jsx,ts,tsx,vue结尾的文件
charset = utf-8 # 设置字符集
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

二、.eslintrc.js文件

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential', //启用 vue 的基础规则
    'eslint:recommended', //启用 eslint 的推荐规则
    '@vue/prettier' //vue使用prettier
  ],
  parserOptions: {
    parser: 'babel-eslint' //可以对所有有效的babel代码进行lint处理
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
    // "prettier/prettier":"off"
  }
}

三、.prettierrc配置文件

1、代码格式化文件

{
  "useTabs": false, # 使用tab缩进还是空格缩进，选择false
  "tabWidth": 2, # tab是空格的情况下，是几个空格，选择2个；
  "printWidth": 120, # 当行字符的长度，推荐80，也有人喜欢100或者120；
  "singleQuote": true, # 使用单引号还是双引号，选择true，使用单引号；
  "trailingComma": "none", # 在多行输入的尾逗号是否添加，设置为 `none`；
  "arrowParens": "avoid", # 箭头函数只要一个参数时，是否要加括号
  "semi": false # 语句末尾是否要加分号，默认值true，选择false表示不加；
}

四、.prettierignore忽略文件

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

五、vue.config.js配置文件

const BASE_URL = process.env.NODE_ENV === 'production' ? '/' : '/'

// 这里的webpack配置会和公共的webpack.config.js进行合并
module.exports = {
  // 项目部署基础
  // 默认情况下，我们假设你的应用将被部署在域的根目录下,
  // 例如：https://www.my-app.com/
  // 默认：'/'
  // 如果您的应用程序部署在子路径中，则需要在这指定子路径
  // 例如：https://www.foobar.com/my-app/
  // 需要将它改为'/my-app/'
  publicPath: BASE_URL,

  // 输出文件目录
  outputDir: 'dist',

  // 放置静态资源的文件名(相对于 outputDir 的) 目录，默认asset，也可以修改成static，记得把src目录下的asset->static
  assetsDir: 'asset',

  /*
  // 可以不设置一般会默认.指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
  indexPath: 'index.html',

  // 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
  filenameHashing:true,

  // 是否使用带有浏览器内编译器的完整构建版本
  runtimeCompiler: false,

  // 构建多页面应用，页面的配置
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/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']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  },

  // css相关配置
  css: {
    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中，默认生产环境下是 true，开发环境下是 false
    extract: process.env.NODE_ENV === 'production',
    // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。Default: false
    sourceMap: false,
    // 启用 CSS modules for all css / pre-processor files.(预加载)
    requireModuleExtension: true,
    loaderOptions: {
      启用less中javascript支持
      less: {
        javascriptEnabled: true
      }
    }
  },

  */

  //设置是否在开发环境下每次保存代码时都启用 eslint验证
  lintOnSave: false,

  //如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
  productionSourceMap: false,

  configureWebpack: {
    // 别名配置
    resolve: {
      alias: {
        //'src': '@', 默认已配置
        assets: '@/assets',
        common: '@/common',
        components: '@/components',
        api: '@/api',
        views: '@/views',
        plugins: '@/plugins',
        utils: '@/utils'
      }
    }
    // 使用前面可加~
  },

  devServer: {
    port: 2021, // 设置端口号
    // host: '10.32.120.69', // ip
    // disableHostCheck: true, //是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查
    // hotOnly: false, // 热更新
    // https: false, // https:{type:Boolean}配置前缀
    open: false, //配置自动启动浏览器
    // proxy: null //设置代理
    proxy: {
      //目的是解决跨域，若测试环境不需要跨域，则不需要进行该配置
      '/api': {
        // 拦截以 /api 开头的url接口
        target: 'https://api.taobao.cn/', //目标接口域名
        changeOrigin: true, //是否跨域
        
        // ws: true, //如果要代理 websockets，配置这个参数
        // secure: false, // 如果是https接口，需要配置这个参数

        // 标识替换
        // 原请求地址为 /api/getData 将'/api'替换''时，
        // 代理后的请求地址为： http://xxx.xxx.xxx/getData
        // 若替换为'/other',则代理后的请求地址为 http://xxx.xxx.xxx/other/getData
        pathRewrite: {
          // 重写路径，替换请求地址中的指定路径
          '^/api': '/' // 将请求地址中的/api替换为空，也就是请求地址中不会包含/api/
        }
      }
    }
  }
}

六、VScode的setting文件— ESLint + Prettier

{
  "workbench.colorTheme": "Atom One Dark",
  "workbench.iconTheme": "vscode-great-icons",
  // 控制资源管理器是否应以紧凑形式呈现文件夹。
  "explorer.compactFolders": false,
  // 路径映射
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },

  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // 100 列后换行
  "editor.wordWrapColumn": 120,
  // 控制折行的方式。on: 将在视区宽度处换行。
  "editor.wordWrap": "on",
  // 值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F
  "editor.formatOnSave": true,

  // 控制是否在键入时自动显示建议。
  "editor.quickSuggestions": {
    "strings": true
  },
  // 在默认不受支持的语言中启用 Emmet 缩写。在此语言和 emmet 支持的语言之间添加映射。
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "wxml": "html"
  },
  // 启用或禁用在 VS Code 中重命名或移动文件时自动更新导入路径的功能。always: 始终自动更新路径。
  "javascript.updateImportsOnFileMove.enabled": "always",
  // 定义一个默认格式化程序
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 模块导出和自动导入
  "vetur.completion.autoImport": false,
  // 始终显示ESlint状态栏项。
  "eslint.alwaysShowStatus": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    // 自动启用 eslint --fix 自动修复
    "source.fixAll": true
  },
  // 开启 vscode 文件路径导航
  "breadcrumbs.enabled": true,

  // // 添加 ESLint验证 的语言组
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  // // 你的插件是 prettier ，应该安装 prettier+
  // // #让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  // #去掉代码结尾的分号
  "prettier.semi": false,
  // #使用单引号替代双引号
  "prettier.singleQuote": true,
  // // #让函数(名)和后面的括号之间加个空格
  // "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // // #区域的默认格式化程序
  // "vetur.format.defaultFormatter.html": "js-beautify-html",
  // // #让vue中的js按编辑器自带的ts格式进行格式化
  // "vetur.format.defaultFormatter.js": "vscode-typescript",
  // "vetur.format.defaultFormatterOptions": {
  //   "js-beautify-html": {
  //     "wrap_line_length": 120,
  //     "wrap_attributes": "auto"
  //   }
  // },
  // // 使用制表符而不是空格缩进行
  // "prettier.useTabs": false,

  // 针对某种语言，配置替代编辑器设置。
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "htmltagwrap.tag": "div",
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "minapp-vscode.disableAutoConfig": true,
  "files.exclude": {
    "**/*.meta": true
  }
}

七、VScode的setting文件— ESLint + Standard

{
  "workbench.colorTheme": "Atom One Dark",
  "workbench.iconTheme": "vscode-great-icons",
  // 控制资源管理器是否应以紧凑形式呈现文件夹。
  "explorer.compactFolders": false,
  // 路径映射
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },

  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // 100 列后换行
  "editor.wordWrapColumn": 100,
  // 控制折行的方式。on: 将在视区宽度处换行。
  "editor.wordWrap": "on",
  // 值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F
  "editor.formatOnSave": true,

  // 控制是否在键入时自动显示建议。
  "editor.quickSuggestions": {
    "strings": true
  },
  // 在默认不受支持的语言中启用 Emmet 缩写。在此语言和 emmet 支持的语言之间添加映射。
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "wxml": "html"
  },
  // 启用或禁用在 VS Code 中重命名或移动文件时自动更新导入路径的功能。always: 始终自动更新路径。
  "javascript.updateImportsOnFileMove.enabled": "always",
  // 定义一个默认格式化程序
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 模块导出和自动导入
  "vetur.completion.autoImport": false,
  // 始终显示ESlint状态栏项。
  "eslint.alwaysShowStatus": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 开启 vscode 文件路径导航
  "breadcrumbs.enabled": true,

  // #区域的默认格式化程序
  // "vetur.format.defaultFormatter.html": "js-beautify-html",
  // "vetur.format.defaultFormatterOptions": {
  //   "js-beautify-html": {
  //     "wrap_line_length": 120,
  //     "wrap_attributes": "auto"
  //   }
  // },
  // // 使用制表符而不是空格缩进行
  // "prettier.useTabs": false,

  "htmltagwrap.tag": "div",
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "minapp-vscode.disableAutoConfig": true,

  // // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // // 添加 ESLint验证 的语言组
  "eslint.validate": ["javascript", "javascriptreact", "vue", "html"],
  // // 你的插件是 prettier ，应该安装 prettier+
  // // #让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  // #去掉代码结尾的分号
  "prettier.semi": false,
  // #使用单引号替代双引号
  "prettier.singleQuote": true,
  // 启用/禁用 JavaScript 验证。
  "javascript.validate.enable": false,
  // // #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 针对某种语言，配置替代编辑器设置。
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}