VS Code软件配置护眼模式和常用插件下载地址 1 vscode Vue2使用配置 1 设置代码编辑器为护眼模式 2

Visual Studio Code软件配置护眼模式和常用插件

1 vscode Vue2使用配置

1 设置代码编辑器为护眼模式

//打开settings.json，代码如下
{

  "window.zoomLevel": 1, //窗口.缩放级别
  "editor.tabSize": 2, //工作台主题颜色
  "breadcrumbs.enabled": false, // 开启 vscode 文件路径导航
  "window.enableMenuBarMnemonics": false,
  "liveServer.settings.donotShowInfoMsg": true,
  "workbench.colorTheme": "Default Light+",
  "workbench.colorCustomizations": { // 颜色设置
      "editor.background": "#C7EDCC",
      "sideBar.background": "#FAF9DE",
      "terminal.background": "#EAEAEF"
  },

  "editor.minimap.maxColumn": 50,
  "editor.fontSize": 12,
  "editor.indentSize": "tabSize",
  "editor.tabSize": 2,
  "extensions.ignoreRecommendations": true,
  "editor.detectIndentation": false,
  "editor.language.brackets": [],
  "vetur.format.options.tabSize": 2,
  "window.commandCenter": false,
  "workbench.layoutControl.enabled": false,
  "explorer.confirmDelete": false,
  "workbench.startupEditor": "none"

}

2 vsCode 常用插件

Chinese (Simplified) Language(必备)　　中文显示安装完之后重启vscode

Path Intellisense (必备)　　自动提示文件路径，支持各种快速引入文件

Vetur (推荐)(vue必备)　　Vue多功能集成插件

Auto Close Tag (必备)　　自动闭合HTML/XML标签

Auto Rename Tag (必备)　　自动完成另一侧标签的同步修改

ESLint (推荐)　　js语法纠错

jQuery Code Snippets (推荐)　　jQuery代码智能提示

JavaScript(ES6) code snippets (推荐)　　ES6语法智能提示，以及快速输入

Turbo Console Log快捷添加 console.log，一键注释 / 启用 / 删除所有 console.log

简单说下这个插件要用到的快捷键:
ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log

—————————————————————————————

2 vscode Vue3使用配置

Auto Close Tag (必备)　　自动闭合HTML/XML标签
Auto Rename Tag (必备)　　自动完成另一侧标签的同步修改
Chinese (Simplified) Language(必备)　　中文显示安装完之后重启vscode
GitHub Theme 主题颜色 light（不喜欢可以不安装此插件）

ESLint (推荐)　　js语法纠错
Path Intellisense (必备)　　自动提示文件路径，支持各种快速引入文件
lokalise.i18n-ally 国际化提示把下面的 json 代码添加到vscode 的 settings.json` 中

"i18n-ally.localesPaths": "locales",
"i18n-ally.keystyle": "nested",
"i18n-ally.sortKeys": true,
"i18n-ally.namespace": true,
"i18n-ally.enabledParsers": ["yaml", "js"],
"i18n-ally.sourceLanguage": "en",
"i18n-ally.displayLanguage": "zh-CN",
"i18n-ally.enabledFrameworks": ["vue"]

bradlc.vscode-tailwindcss Tailwind CSS
TypeScript Vue Plugin (Volar)
Vite
Vue
Vue 3 Snippets?
Vue Language Features (Volar)?
Vue Peek?