开发工具配置

选择一种常用的开发工具,配置好环境即可规范代码


# vscode 配置(建议使用)

pro 已集成 eslint、prettier、stylelint,安装以下插件即可实现代码自动整理,基础问题自动修复


vscode 下载地址 https://code.visualstudio.com/ (opens new window)

必备插件安装(建议 vscode 只保留以下插件,防止自动格式化、自动修复失效)

eslint (opens new window)(必须安装)

stylelint (opens new window)(必须安装)

Prettier - Code formatter (opens new window)代码自动格式化(必须安装)

Vetur (opens new window)vue 开发必备(必须安装)

Auto Import (opens new window)import 引入自动补全(推荐安装)

Import Cost (opens new window) 查看你引入的依赖模块大小(推荐安装)

Auto Close Tag (opens new window) 自动补全 html 标签(推荐安装)

Auto Rename Tag (opens new window) 自动重命名 html 标签(推荐安装)

vscode-element-helper (opens new window) element 开发必备(推荐安装)

docthis (opens new window)注释插件(可不安装)

One Monokai Theme (opens new window) vscode 主题包(可不安装)

Git History (opens new window) 查看 git 提交历史(可不安装)

Live Server (opens new window) 打包项目可直接预览(可不安装)

Svg Preview (opens new window) svg 查看器(可不安装)

.vscode/setting.js配置(这里只做展示,默认已配好,无需再次配置)

{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "workbench.colorTheme": "One Monokai",
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "emmet.triggerExpansionOnTab": true,
  "editor.formatOnSave": true,
  "javascript.format.enable": true,
  "git.enableSmartCommit": true,
  "git.autofetch": true,
  "git.confirmSync": false,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "liveServer.settings.donotShowInfoMsg": true,
  "explorer.confirmDelete": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "files.exclude": {
    "**/.idea": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true,
    "source.fixAll.eslint": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.vueIndentScriptAndStyle": true,
  "docthis.authorName": "chuzhixin 1204505056@qq.com",
  "docthis.includeAuthorTag": true,
  "docthis.includeDescriptionTag": true,
  "docthis.enableHungarianNotationEvaluation": true,
  "docthis.inferTypesFromNames": true,
  "vetur.format.defaultFormatter.html": "prettier",
  "files.autoSave": "onFocusChange"
}

# webstorm 的配置(功能更强大,但配置略繁琐)

webstorm 下载地址https://www.jetbrains.com/zh-cn/webstorm/download/ (opens new window)

eslint 配置 在设置中搜索eslint如何配置即可

An image

stylelint 在设置中搜索stylelint如何配置即可

An image


# #关闭 eslint(不推荐)

文件位置src/config/cli.config.js


/**
 * @description 导出vue/cli配置,以下所有配置修改需要重启项目
 */
module.exports = {
  // 开发环境每次保存时是否输出为eslint编译警告,改为false重启即可关闭eslint
  lintOnSave: true,
}