vscode插件

配置

以下是我的配置

{
  /*editor*/
  "editor.cursorBlinking": "smooth", //使编辑器光标的闪烁平滑，有呼吸感
  "editor.formatOnPaste": true, //在粘贴时格式化代码
  "editor.formatOnType": true, //敲完一行代码自动格式化
  "editor.formatOnSave": true, //保存时格式化代码
  "editor.smoothScrolling": true, //使编辑器滚动变平滑
  "editor.tabCompletion": "on", //启用Tab补全
  "editor.fontFamily": "'Consolas', '思源黑体'", //字体设置
  "editor.fontLigatures": true, //启用字体连字
  /*workbench*/
  "workbench.startupEditor": "none", //新的工作空间开启时是否开启未定义文件
  "workbench.list.smoothScrolling": true, //使文件列表滚动变平滑
  "workbench.editor.untitled.hint": "hidden", //隐藏新建无标题文件时的“选择语言？”提示
  /*terminal*/
  "terminal.integrated.cursorBlinking": true, //终端光标闪烁
  "terminal.integrated.rightClickBehavior": "default", //在终端中右键时显示菜单而不是粘贴
  /*files*/
  "files.autoGuessEncoding": true, //让VScode自动猜源代码文件的编码格式
  "files.insertFinalNewline": true, //自动在末尾加空行
  "files.exclude": {
    //隐藏一些碍眼的文件夹
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/tmp": true,
    "**/node_modules": true,
    "**/bower_components": true
  },
  "files.watcherExclude": {
    //不索引一些不必要索引的大文件夹以减少内存和CPU消耗
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/tmp/**": true,
    "**/bower_components/**": true,
    "**/dist/**": true
  },
  /*ESLint*/
  "eslint.validate": [
    "javascript",
    "javascriptreact"
    // "vue"
  ],
  "eslint.alwaysShowStatus": true,
  /*prettier*/
  "prettier.semi": false, // 去掉代码结尾的分号
  // "prettier.eslintIntegration": true, // 让prettier使用eslint的代码格式进行校验
  "prettier.printWidth": 140, // 超过最大值换行
  "prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  "prettier.singleQuote": true, // 使用单引号替代双引号
  "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数(名)和后面的括号之间加个空格
  /*window*/
  "window.menuBarVisibility": "visible", //在全屏模式下仍然显示窗口顶部菜单（没有菜单很难受）
  "window.dialogStyle": "custom", //使用更具有VSCode的UI风格的弹窗提示（更美观）  
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "breadcrumbs.enabled": true,
  "git.ignoreLegacyWarning": true,
  "python.linting.flake8Enabled": true,
  "python.linting.flake8Args": ["--max-line-length=248", "--ignore=W191"],
  "python.formatting.provider": "yapf",
  "python.linting.pylintEnabled": false, // 关闭pylint工具
  // "editor.unicodeHighlight.allowedLocales": {
  //   "zh-hant": true
  // },
  // "python.analysis.extraPaths": ["/home/MonitorTools/python3.8.6/lib/python3.8/site-packages"],
  "workbench.iconTheme": "vscode-icons",
  "python.languageServer": "Pylance",
  // "explorer.confirmDragAndDrop": false,
  "workbench.colorTheme": "Dracula Soft",
  "bracket-pair-colorizer-2.depreciation-notice": false,
  "highlight-matching-tag.styles": { "opening": { "name": { "underline": "yellow" } } }
}

插件

以下是我在用的插件，写的django项目

# python插件
插件：Pylance 
功能：自动导入、代码补全等
安装：vscode插件市场
设置："python.languageServer": "Pylance"

插件：yapf
功能：代码格式化
安装：pip install yapf
设置："python.formatting.provider": "yapf"

# 前端插件
插件：Auto Close Tag
功能：自动补全闭合标签（如输入
会自动补上
）
安装：vscode插件市场
设置：无

插件：HTML Snippets
功能：html代码补全（如输入div自动补全
 {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
      "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
      "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
      "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
      "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
        },

插件：ESLint
功能：js等语法检查，和Prettier - Code formatter配合使用
安装：vscode插件市场
设置：  
    "eslint.validate": [
        "javascript",
        "javascriptreact"
     ],
       
插件：CSS Peek
功能：按住ctrl，鼠标移至标签属性名即可快速查看css样式，点击鼠标左键即可快速跳转至css样式行，仅支持css样式写在单独文件
安装：vscode插件市场
设置：无  

插件：HTML CSS Support
功能：css代码补全提示
安装：vscode插件市场
设置：无     

插件：Image preview
功能：引入图片后，在代码左侧可看到小的预览图
安装：vscode插件市场
设置：无


# 公用插件
插件：indent-rainbow
功能：缩进区域背景高亮
安装：vscode插件市场
设置：无

插件：Bracket Pair Colorizer
功能：不同颜色高亮不同括号
安装：vscode插件市场
设置：无

插件：Path Intellisense
功能：文件路径联想
安装：vscode插件市场
设置：无（可以配置联想规则，我这里没做任何配置，只是输入文件时自动联想）

插件：Chinese (Simplified) 
功能：简体中文包
安装：vscode插件市场
设置：无

插件：Dracula Official 
功能：主题包
安装：vscode插件市场
设置：无

插件：Project Manager
功能：在左边栏添加个文件夹图标，点击图标进去后上方有个保存按钮，点击即可将当前项目储存在此处，下次可通过这里快速打开
安装：vscode插件市场
设置：无

插件：vscode-icons
功能：根据vscode文件夹和文件的属性展示不同的图标
安装：vscode插件市场
设置：无