开发工具安装配置

码匠君2024年12月18日大约 3 分钟前期准备开发环境基础知识IdeaVscode

[一]Idea

[2]在 Idea 中修改 Maven 配置

打开 Idea，点击 File -> Settings... -> Maven，打开 Maven 配置面板，如下图所示：

在 Maven 配置面板中，修改 Maven 的配置。

设置 Maven home path

在 Maven 配置面板中，设置 Maven home path 的值，这个值就是环境变量 MAVEN_HOME 中配置的值。如下图所示：

设置 User setting files

在 Maven 配置面板中，首先勾选 User setting files 设置后面的 Override，勾选之后 User setting files 的选择框就会变为激活的状态。

点击 User setting files 设置中的 文件夹 按钮，选择 ${maven_home}/conf/settings.xml 文件，具体如下图所示：

如果 ${maven_home}/conf/settings.xml 文件已经正确配置，并且在 User setting files 设置中也选择正确的情况下，Local repository 配置就会自动显示出自定义本地仓库的路径，这个路径就是刚刚，在 ${maven_home}/conf/settings.xml 中设置的 <localRepository> 的值，这就说明配置成功。如上图所示。

[3]在 Idea 中修改 Maven 的全局配置

Idea 中很多设置否分为两种，一种设置只是针对当前工程，这种设置只是针对当前工程有效，打开新的工程或者重新检出当前工程就需要重新配置；一种设置是针对新工程，配置之后所有用 Idea 打开工程都会生效，就不需要重新设置。

上一步中进行 Maven 设置，就是前一种设置，只对当前工程有效，打开新的工程或者重新检出当前工程就需要重新设置 Maven。

可以通过下面的方式，进行 Maven 的 “全局” 配置。

点击 File -> New Projects Setup -> Settings For New Prjects...，会跳出全局设置面板，如下图所示：

在这个面板中，找到 Maven 配置，重复进行上一步的操作即可。

将下面配置，贴入 settings.json 文件中

{
  // ===========以下工作区显示的配置================
  // 开启 vscode 文件路径导航
  "breadcrumbs.enabled": true,
  // 自动保存 关闭
  "files.autoSave": "afterDelay",
  "workbench.tree.indent": 20,
  "workbench.editor.labelFormat": "medium",
  // ===========以下编辑区显示的配置================
  "editor.minimap.enabled": true,
  // 控制折行方式。可以选择： - “off” （禁用折行）， - “on” （视区折行），
  //  “wordWrapColumn”（在“editor.wordWrapColumn”处折行）或 - “bounded”（在视区与“editor.wordWrapColumn”两者的较小者处折行）。
  "editor.wordWrap": "wordWrapColumn",
  "editor.fontSize": 16,
  // 150 列后换行
  "editor.wordWrapColumn": 150,
  // ===========以下4个是控制保存时自动格式化的，并且以4格缩进================
  "editor.tabCompletion": "on",
  // tab 大小为2个空格
  "editor.tabSize": 2,
  "editor.autoClosingBrackets": "always",
  "editor.autoClosingQuotes": "always",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  // 设置 eslint 保存时自动修复
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.fontLigatures": false,
  // ===========以下是eslint配置的============================
  "eslint.enable": true,
  "eslint.options": {
    "extensions": [".js", ".vue", ".ts", ".tsx"]
  },
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "json",
    "typescript",
    "vue-html"
  ],
  // ===========以下是vue配置的============================
  "javascript.format.enable": false,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.enable": false,
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.iconTheme": "vscode-icons",
  "markdownlint.config": {
    "MD029": false,
    "MD033": false
  },
  "redhat.telemetry.enabled": true,
  "workbench.editor.enablePreview": false,
  "vsicons.dontShowNewVersionMessage": true,
  "vite.autoStart": false,
  "settingsSync.ignoredExtensions": [],
  "sync.autoUpload": true,
  "sync.autoDownload": true,
  "workbench.colorTheme": "Default Dark Modern"
}

[3]安装插件

推荐安装的插件：

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
Code Spell Checker
EditorConfig for VS Code
ESLint
HTML CSS Support
Image preview
Import Cost
indent-rainbow
JavaScript (ES6) code snippets
Markdown All in One
Path Intellisense
Prettier - Code formatter
Vite
vscode-icons
Vue - Official
Vue 3 Snippets
Vue Peek
Vue VSCode Snippets

开发工具安装配置

[一]Idea

[1]下载 Idea

[2]在 Idea 中修改 Maven 配置

[3]在 Idea 中修改 Maven 的全局配置

[二]Vscode

[1]下载 Vscode

[2]设置 Vscode

[3]安装插件