IDE

vscode 记录

语言

配置语言： Configure Display Language

快捷键

显示所有命令： ctrl+shift+p
格式化代码： shift+alt+f

background-cover

功能描述：设置背景图

本插件通过修改 vscode 的 CSS 文件运行，会显示 code-insiders 损坏，选择不再提醒，顶部会显示不受支持。

解决办法：

运行 ext install lehni.vscode-fix-checksums 安装插件，运行下列第一个命令然后重启即可。

Fix Checksums: Apply // Checks core files for changes and applies new checksums.
Fix Checksums: Restore // Restores original state of VSCode checkums.

插件配置：

//#插件background-cover
//图片路径
"backgroundCover.imagePath": "c:\\Users\\10766\\Pictures\\ideaBackground\\23.jpg",
//透明度
"backgroundCover.opacity": 0.6,

Ubuntu 系统添加背景图：

关闭背景插件

sudo find / -name workbench.desktop.main.css
/usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.css
cd /usr/share/code/resources/app/out/vs/workbench
chmod 666 workbench.desktop.main.css
vim workbench.desktop.main.css

添加如下代码：

body {
    background-size:cover;
    background-repeat: no-repeat;
    opacity:0.9;
    background-image:url('/home/congco/Pictures/wallhaven-5dy189.jpg');
}

beautify

本插件可自定义格式化 html,js,css,json 文件。
官方文档

插件配置：

//#beautify插件格式化代码
//设置html的默认格式化方式
"[html]": {
	"editor.defaultFormatter": "HookyQR.beautify"
},
//格式风格
"brace_style": "none,preserve-inline",
"[javascript]": {
	"editor.defaultFormatter": "HookyQR.beautify"
},

Partial Diff

功能描述：可以选择两部分代码进行对比，可以在同一个文件

用法：右键选择 Select Text for Compare 选择第一部分代码，Compare Text with Previous Selection 来进行比较

IntelliSense for CSS class names in HTML

功能描述：在 html 文件中，自动提示 css class 名字

Java prettier formatter

功能描述：对 java 文件进行格式化

Material Icon Theme

功能描述：修改 vscode 图标

One Dark Pro

功能描述：vscode 的一款黑暗主题

open in browser

功能描述：在右键添加在浏览器打开此文件

Prettier - Code formatter

功能描述：用来格式化一下文件，如 JavaScript/TypeScript/Flow/JSX/JSON/CSS/SCSS/Less/HTML/Vue/Angular/GraphQL/Markdown/YAML

配置：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

XML Tools

功能描述：用来格式化 xml 文件

Vetur

功能描述：vue 必装支持插件，语法高亮、错误检测等

Vue 3 Snippets

功能描述：可以快速生成一些 vue 的语言模板

C/C++

功能描述：支持 C/C++ 语言

Code Runner

插件介绍：可以在 vscode 中快捷的运行代码

插件功能：

支持多种语言
支持文件运行
支持文件中部分代码运行

插件配置：

//#Code Runner插件
//运行配置
"code-runner.executorMap": {
    "javascript": "node",
    "python": "set PYTHONIOENCODING=utf8 && py -3",
    //"go": "go run",
    "html": "\"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe\"",
    "java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
    "cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
},
//运行前保存当前文件
"code-runner.saveFileBeforeRun": true,
//清除前面的输出
"code-runner.clearPreviousOutput": true,
//在终端执行命令
//"code-runner.runInTerminal": true,

Filter Line

参考文档：Filter Line

功能描述：根据正则过滤行

用法：ctrl + shift +p , 输入 Filter Line By 选择要过滤的方式(字符串、正则、配置文件)

大文件过滤：大于 50MB 的文件，在同目录创建空文件 filterline, 过滤这个空文件，选择要过滤的文件

大文件无法直接过滤因为 vscode 限制，修改限制参考 https://github.com/microsoft/vscode/issues/31078

需要将 resources/app/out/vs/workbench/workbench.desktop.main.js 下的 static _MODEL_SYNC_LIMIT = 50 * 1024 * 1024; // 50 MB, // used in tests 变大

Auto Rename Tag

插件介绍：修改标签的时候，自动修改配对的标签。

弃用，vscode 已经支持

插件配置：可以用 "*" 代表所有语言

"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]

Language Support for Java™ by Red Hat

支持 java 语言

代码补全： code completion
自动导入： organize imports
代码跳转： code navigation

ubuntu 下 alt 不可多行编辑

参考文献：

Ubuntu 16.04关闭Alt+鼠标左键移动窗口（转）

系统：ubuntu 16.04

突然发现vscode,alt +左键编辑多行不可用。

原因：ubuntu 默认alt 用来移动窗口，需要改变。

打开终端，菜单-编辑-配置文件首选项-命令，勾上“以登录Shell方式运行命令”，重启终端。

在终端输入

# 查看“mouse-button-modifier”当前的值，应该是返回'<Alt>'
gsettings get org.gnome.desktop.wm.preferences mouse-button-modifier

# '<Super><Alt>'为要更改的按键，意为Win+Alt，也可以改为想要的键。测试此值不能为空或禁用，否则出现默认按下Alt键的效果。
gsettings set org.gnome.desktop.wm.preferences mouse-button-modifier '<Super><Alt>'

完事记得取消“以登录Shell方式运行命令”。

JSON 配置文件

{
    // # vscode 设置
    // 在没有从上一会话中恢复出信息的情况下，新建未命名窗口
    "workbench.startupEditor": "newUntitledFile",
    // 控制资源管理器是否在把文件删除到废纸篓时进行确认。
    "explorer.confirmDelete": false,
    // 启用后，将不会显示扩展建议的通知。
    "extensions.ignoreRecommendations": true,
    // 控制树是否应呈现缩进参考线
    "workbench.tree.renderIndentGuides": "none",
    // 关闭安全提示
    "security.workspace.trust.enabled": false,
    // 信任空窗口
    "security.workspace.trust.untrustedFiles": "open",
    // 定义在 macOS 上运行的终端应用程序
    "terminal.external.osxExec": "iTerm.app",

    // # 编辑器设置
    // 控制活动代码段是否阻止快速建议
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    // 启用/禁用字体连字
    "editor.fontLigatures": true,
    // 控制编辑器在空白字符上显示符号的方式
    "editor.renderWhitespace": "boundary",
    // 控制无标题提示应该是编辑器或浮动按钮中的内联文本，还是应该隐藏。
    "workbench.editor.untitled.hint": "hidden",
    // 键入一行时自动格式化该行
    "editor.formatOnType": true,
    // 控制编辑器是否已启用链接编辑，同步修改标签名
    "editor.linkedEditing": true,
    // 控制在建议列表中如何预先选择建议。
    "editor.suggestSelection": "first",
    // 对大型文件进行特殊处理，禁用某些内存密集型功能。
    "editor.largeFileOptimizations": false,
    // 启用原生彩色括号
    "editor.bracketPairColorization.enabled": true,
    // 括号控制线
    "editor.guides.bracketPairs": "active",
    // 指定一个制表符等于的空格数
    "prettier.tabWidth": 4,

    // # 编程字体设置
    // 字体样式
    "editor.fontFamily": "JetBrains Mono Variable Italic, Consolas, 'Courier New', monospace",
    // 字体大小
    "editor.fontSize": 19,

    // # 文件管理
    // 文件资源管理器根据此设置决定要显示或隐藏的文件和文件夹
    "files.exclude": {
        "**/.classpath": true,
        "**/.project": true,
        "**/.settings": true,
        "**/.factorypath": true
    },

    // # 自动更新设置
    // 禁止自动更新，只可手动更新
    "update.mode": "manual",

    // # 插件background-cover
    // 图片路径
    "backgroundCover.imagePath": "/Users/rainsheep/Pictures/save/ide-background.jpg",
    // 透明度
    "backgroundCover.opacity": 0.3,

    // ====== 格式化相关 ======
    // # 插件 prettier-code formatter 格式化
    // 设置为默认格式化插件，注意所有文件格式化配置在下面
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

    // # beautify插件格式化代码
    // 设置html的默认格式化方式
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },

    // # 插件 google-java-format 格式化 java 文件
    "[java]": {
        "editor.defaultFormatter": "mwpb.java-prettier-formatter",
    },

    // # 插件 XML Tools 格式化
    "[xml]": {
        "editor.defaultFormatter": "DotJoshJohnson.xml"
    },

    // # C/C++ 插件格式化代码
    "[c]": {
        // "editor.defaultFormatter": "ms-vscode.cpptools"
    },
    "[cpp]": {
        // "editor.defaultFormatter": "ms-vscode.cpptools"
    },

    // # shell 格式化
    "[shellscript]": {
        "editor.defaultFormatter": "foxundermoon.shell-format"
    },

    "[dockerfile]": {
        "editor.defaultFormatter": "foxundermoon.shell-format"
    },
    // ====== 格式化结束 ======

    // # Code Runner插件
    // 运行配置
    "code-runner.executorMap": {
        "javascript": "node",
        "python": "set PYTHONIOENCODING=utf8 && python3",
        "html": "${CHROME_PATH}",
        "java": "cd $dir && javac -encoding UTF-8 $fileName && java $fileNameWithoutExt",
        "cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt"
    },
    // 运行前保存当前文件
    "code-runner.saveFileBeforeRun": true,
    // 清除前面的输出
    "code-runner.clearPreviousOutput": true,
    // 在终端执行命令
    "code-runner.runInTerminal": true,

    // # emmet
    // 启用后，按下 TAB 键，将展开 Emmet 缩写。
    "emmet.triggerExpansionOnTab": true,
    // 写 emmet 时可以提示完成
    "html-css-class-completion.enableEmmetSupport": true,
    // 若为 `true`，Emmet 建议将显示为代码片段。可以在 `editor.snippetSuggestions` 设置中排列其顺序。
    "emmet.showSuggestionsAsSnippets": true,
    // 将语法展开提示在提示列表中置顶
    "editor.snippetSuggestions": "top",
    // emmet能识别缩写语法的场景
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "vue-html": "html",
        "plaintext": "jade"
    },

    // # on dark pro 主题
    "workbench.colorTheme": "One Dark Pro",
    // 色彩设置为 vivid
    "oneDarkPro.vivid": true,

    // # 图标主题， material icon theme 插件
    // 指定工作台中使用的文件图标主题
    "workbench.iconTheme": "material-icon-theme",

    // # 翻译插件
    // 函数翻译开关。例如：有一个函数名为“PostCreateReceipt”。它将被变更为“Post Create Receipt”，然后再翻译。
    "google-translate.switchFunctionTranslation": true,
    // 翻译服务域名
    "google-translate.serverDomain": "https://translate.google.com",
    "google-translate.maxSizeOfResult": 100
}

如果觉得文章对你有用，请随意赞赏

vscode

vscode 记录

https://blog.rainsheep.cn/archives/1575442896111

作者

Rainsheep

发布于

2019-12-04

更新于

2023-12-28

许可协议

CC BY 4.0