欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

编辑器IDE之VSCode

程序员文章站 2024-03-05 11:41:18
...
很多时候面临换项目组,公司内部换等等,需要清除之前的权限,电脑更换等... 确实很烦人,所以记录也是给自己下次更加快速方便的使用

插件安装

个人常用的一些插件,发现好用的会更新
插件名 功能
vscode-fileheader 文件头部信息
ESLint 代码校验工具
Auto Close Tag 自动闭合标签
Auto Rename Tag 修改HTML标签时,自动修改匹配的标签
TODO Highlight toDo高亮
Bracket Pair Colorizer 用不同颜色高亮显示匹配的括号
vetur vue代码提示插件
vscode-icons 文件图标
One Dark Pro vscode主题

vscode eslint 配置

  1. vscode 下载eslint插件
  2. npm install -g eslint 全局安装eslint
  3. vscode 用户设置配置 (settings.json)

  {
  //为了符合eslint的两个空格间隔原则 
  "editor.tabSize": 2,
  //使用eslint规则重新格式化代码
  "eslint.autoFixOnSave": true,
  //关闭自动文件自动存储
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    },
    "html",
    "vue"
  ]
}
  1. 项目中有eslint的配置文件 即可用eslint的基本配置

setting.json

部分setting设置

{
  "workbench.iconTheme": "vscode-icons",
  "workbench.colorTheme": "One Dark Pro",
  "explorer.confirmDelete": false,
  //为了符合eslint的两个空格间隔原则 
  "editor.tabSize": 2,
  //使用eslint规则重新格式化代码
  "eslint.autoFixOnSave": true,
  //关闭自动文件自动存储
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    },
    "html",
    "vue"
  ],
  "fileheader.Author": "xiaoxuehe",
  "fileheader.LastModifiedBy": "xiaoxuehe",
  "todohighlight.isEnable": true,
}

问题记录

左侧活动栏

左边活动栏搜索按钮没了,文件->首选项->设置


  // 控制搜索功能显示在侧边栏还是水平空间更大的面板区域
  "search.location": "sidebar",

原文地址:https://segmentfault.com/a/1190000017350860

相关标签: 编辑器IDE VSCode