巧用 VScode 网页版 IDE 搭建个人笔记知识库!

289a7eb4206d244c3a23003585db5b80.gif

[ 知识是人生的灯塔，只有不断学习，才能照亮前行的道路 ]

巧用 VScode 网页版 IDE 搭建个人笔记知识库!

描述：最近自己在腾讯云轻量云服务器中部署了一个使用在线 VScode 搭建部署的个人Markdown在线笔记，考虑到在线 VScode 支持终端模式，可以用来做各种开发环境搭建以及代码运行调试等，同时也为恶意攻击者提供了一个攻击入口，所以考虑到安全性问题，就打算将整个在线 VScode 容器进行离线，不让访问互联网，也能进一步保证无法调用外部接口进行反弹Shell以及避免其他一些必须联网攻击的手段，下面请看整个实现过程。

原文链接：巧用 VScode 网页版 IDE 搭建个人笔记知识库!最近自己在腾讯云轻量云服务器中部署了一个使用在线 VScode 搭建部署的个人Markdown在线笔记，考虑到支持终端模式，给恶意攻击者提供了一个攻击入口，所以考虑到安全性问题，就打算将整个在线 VScode 容器进行离线，不让访问互联网。icon-default.png?t=N7T8https://mp.weixin.qq.com/s/Mn1-o9Z6SY9L3UtH-SJCOA

前置说明

描述：在上一章作者已经介绍了在线 VScode 搭建部署的整个过程，这里就不再赘述了，直接进入正题，请按照《VS Code网页版IDE，每个程序猿必备一套!》文章中的要求进行基础环境进行配置, 此处作者推荐一下vscode中常用的开发插件，希望对各位开发者有帮助。

  • Chinese (Simplified) : 适用于 VS Code 的中文（简体）语言包

  • vscode-icons: Visual Studio 代码的图标

  • markdown All in One: 提供Markdown编辑的全方位支持，包括实时预览、语法提示、目录生成、表格生成等多种功能。

  • Markdown Preview Enhanced: 支持实时预览 Markdown 文件效果，并具备导出 PDF、支持数学公式、流程图等多种高级功能，提供了丰富的定制选项和兼容性，极大地提升了 Markdown 文档的编辑和预览体验。

  • Go : 对Visual Studio代码的Rich Go语言支持

  • Database Client：Database manager for MySQL/MariaDB, PostgreSQL, SQLite, Redis and ElasticSearch.

  • SQLite：Explore and query SQLite databases.

  • Live Server: 启动具有静态和动态页面实时重新加载功能的本地开发服务器

  • ESLint : 将ESLint JavaScript集成到VS代码中

  • wakatime：记录每天coding的时间

  • :emojisense: 自动追加添加emoji表情符号

  • Surround: 用于在代码块周围添加包装代码片段，JS前端必备。

  • CSS Peek：它允许开发者直接从HTML文档中快速跳转到匹配的CSS样式定义，并提供预览功能，从而大大提高CSS样式的查找和编辑效率。

  • Regex Previewer：可以实时预览正则表达式匹配结果，并适用于多种前端框架和语言，同时提供快捷键操作、全局和多行选项等便捷功能，以提升开发效率。

  • Code Spell Checker ：可以检查单词拼写是否出现错误，检查的规则遵循 camelCase （驼峰拼写法）

  • i18n Ally: 主要用于国际化多语言开发，提供内联提示、快速修改key值对应的语言文件、统一管理翻译、自动翻译等功能。

  • Turbo Console Log : 一键生成有意义的 console.log 消息，支持多语言、多光标操作，提供可定制的日志类型和输出格式，提高调试效率。

  • indent-rainbow: 一款代码缩进可视化插件，它通过为文本前面的缩进着色，使缩进更具可读性。

  • Remote-SSH: 允许开发者通过 SSH 协议连接到远程服务器或虚拟机，直接在本地 VS Code 编辑器中操作远程服务器上的代码，实现无缝的远程开发体验。

  • Vue - Official : Vue 官方扩展。

  • JavaScript (ES6) code snippets: 通过此插件可以使用预定义的 ES6 语法片段速记，从而提高开发效率。

  • Import Cost: 在项目中导入多个包时可能会出现性能问题，Import Cost 就用于查看将特定库导入项目的成本。

  • VS Code Counter: 插件用于统计项目代码的行数，

  • Highlight Matching Tag : 用于实时高亮显示匹配的标签对，方便用户在 HTML 或 XML 代码中快速找到配对的标签。

  • TODO Highlight: 实时高亮显示代码中的TODO、FIXME等标记，支持自定义关键字和正则表达式匹配，方便开发者快速识别、管理和追踪待办事项。

  • Better comments: 该插件对不同类型的注释会附加了不同的颜色，更加方便区分，帮助我们在代码中创建更人性化的注释。

  • Colorize: 给颜色代码增加一个当前匹配代码颜色的背景。它通过 CSS 变量、预处理器变量、hsl/hsla 颜色、跨浏览器颜色、exa、rgb、rgba和argb的彩色背景将 CSS 颜色可视化，帮助开发者快速区分颜色。

  • Image preview: 通过此插件，当鼠标悬浮在图片的链接上时，可以实时预览该图片，除此之外，还可以看到图片的大小和分辨率。

  • CodeSnap: 用于对代码的进行截图和共享。屏幕截图可以用文本或形状进行注释，并通过链接共享或包含在网站或文档中。只需使用 ctrl + shift + P 并输入 CodeSnap，然后按回车键，CodeSnap 窗口就会打开。

除此之外，建议将 Markdown 笔记放在个人 Gitlab 或者 Gitee 、Github 等代码托管平台中，这样方便进行版本管理以及备份。

151f0a79d9e1cd1ea040b49ff07ceff6.png

weiyigeek.top-全栈工程师个人笔记知识图

温馨提示：作者最近10年的工作学习笔记（涉及网络、安全、运维、开发、机器学习），需要学习实践笔记的看友，可添加作者账号[WeiyiGeeker]，目前价格￥199，除了获得从业笔记的同时还可进行问题答疑,相关工具以及每月远程技术支持，希望各位看友多多支持，收获定大于付出！下面大致看看作者笔记中的大纲内容。

555e64ec0f2aab27cf08400c9150ac01.png

weiyigeek.top-作者笔记1图

a8fdba45f34175eceee912e4a34acd1b.png

weiyigeek.top-作者笔记2图

15009c99481fd67f1d26e55ab725692e.png

weiyigeek.top-作者笔记3图

79b158e6353804c1fad83d4a9c9a7c42.png

weiyigeek.top-作者笔记4图

8d8a19fddf8817f3528d646c92e5f97e.png

weiyigeek.top-作者笔记5图

a22255435cb686f94917007cddd81ac3.png

weiyigeek.top-作者笔记6图

操作步骤

Step 1.将个人笔记代码仓库克隆到本地，并进入/opt/code-server/project/目录中,  初次使用 SSH 协议进行代码克隆、推送等操作时，需按下述提示完成 SSH 配置，在Gitee上做公密钥认证（https://gitee.com/profile/sshkeys）就不在累述了。

# 安装 git
apt install git# 生成获取 RSA 公密钥
ssh-keygen -t rsa
cat ~/.ssh/id_rsa.pub# 拉取笔记
cd /opt/code-server/project/
git clone git@gitee.com:WeiyiGeek/blog.git# 设置目录文件权限（只有root用户可读可写，其他用户只读）, 防止大家误修改笔记！
chown -R root:root /opt/code-server/project/blog
chown -R 754 /opt/code-server/project/blog

Step 2.创建一个docker-compose.yaml文件，并编写如下内容，其中DOCKER_USER=ubuntu表示容器内用户为ubuntu，TZ=Asia/Shanghai设置时区，并进行在线vscode的一些安全配置，禁用一部分功能以及禁止访问到外网（PS: com.docker.network.bridge.enable_ip_masquerade），最后将个人笔记代码仓库挂载到容器中。

tee /opt/code-server/docker-compose.yaml <<EOF
version: '3.9'
services:vscode-server:container_name: code-serverimage: registry.cn-hangzhou.aliyuncs.com/weiyigeek/code-server:latestcommand: --bind-addr 0.0.0.0:8080 --disable-update-check --disable-file-downloads --disable-file-uploads --disable-proxy --ignore-last-opened --disable-getting-started-override --welcome-text "欢迎访问，全栈工程师修炼必备笔记站点!"user: "1000:1000"ports:- 127.0.0.1:3002:8080environment:- TZ=Asia/Shanghai- DOCKER_USER=ubuntuvolumes:- /opt/code-server/.local:/home/coder/.local- /opt/code-server/.config:/home/coder/.config- /opt/code-server/project/blog/source/_posts:/home/coder/projectdns:- 127.0.0.1- 127.0.1.1networks:- privatenetworks:private:driver: bridgedriver_opts:com.docker.network.bridge.enable_ip_masquerade: 'false'
EOF

Step 3.部署资源清单创建容器，并且验证容器状态是否正常。

$ docker-compose up -d
$ docker ps# CONTAINER ID   IMAGE                                                            COMMAND                  CREATED       STATUS       PORTS                                       NAMES# cd290e6326f5   registry.cn-hangzhou.aliyuncs.com/weiyigeek/code-server:latest   "/usr/bin/entrypoint…"   12 days ago   Up 12 days   127.0.0.1:3002->8080/tcp                    code-server# 进入容器验证是否能访问外网（可以参考已经无法访问外网了）
$ docker exec -it code-server bash
ubuntu@cd290e6326f5:~$ curl -I  weiyigeek.top
curl: (6) Could not resolve host: weiyigeek.top

Step 4.然后访问作者前面搭建部署的1panle面板进行，通过使用Openresty中间件（若没有安装可参考此篇《部署OpenResty一个基于 Nginx 与 Lua 的高性能 Web 平台》文章），设置在线VScode的反向代理地址http://127.0.0.1:3002到443端口访问，并配置好域名解析到note.weiyigeek.top。

location ^~ / {proxy_pass http://127.0.0.1:3002; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header X-Forwarded-Proto $scheme; proxy_http_version 1.1; add_header X-Cache $upstream_cache_status; add_header Strict-Transport-Security "max-age=31536000"; 
}

8dfb520dec16d260765645d14cd447af.png

weiyigeek.top-反向代理设置图

Step 5.为了安全起见，还在 OpenResty 启用了 auth 远程身份认证，为每个购买我笔记的读者分配一个账号密码，在浏览器中输入https://note.weiyigeek.top/进行认证后，即可访问到在线 VScode 网页版中搭建的作者十年的学习工作笔记（PS: 作者通常会在每周五持续更新笔记哟！），最后若有需要笔记的小伙伴们可以添加作者【WeiyiGeeker】，说明来意。

915e2d0ecc31ccacd1e5f9d017af8785.png

weiyigeek.top-作者十年的学习工作笔记图

至此，在线VScode IDE中搭建个人Markdown知识库实践完毕！

参考文档：https://coder.com/docs/code-server/FAQ

5ebfae3d5c73c8a56abd133e0eb862f0.gif

313a3ee1a80a1696d7b2ebfebb9b71b3.gif

感觉文章不错的童鞋，请帮忙转发，点 👍、在看，若有疑问的小伙伴，可在评论区留言你想法哟💬！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/377188.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[K8S]一、Flink on K8S

[K8S]一、Flink on K8S

Kubernetes | Apache Flink 先编辑好这5个配置文件&#xff0c;然后再直接执行 kubectl create -f ./ kubectl get all kubectl get nodes kubectl get pods kubectl get pod -o wide kubectl get cm -- 获取所有的configmap 配置文件 kubectl logs pod_name -- 查看…
阅读更多...
智能汽车域控制器FOTA升级方案探讨

智能汽车域控制器FOTA升级方案探讨

1.概述 本文探讨的OTA升级仅针对运行linux系统的域控制器&#xff0c;升级方式为FOTA&#xff0c;探究升级文件从OTA服务器下载到域控中以后&#xff0c;如何将升级文件安装到存储系统。 为安全起见&#xff0c;支持FOTA升级的存储区域必须支持AB分区设计&#xff0c;每个分区…
阅读更多...
浅学三次握手

浅学三次握手

数据要完成传输&#xff0c;必须要建立连接。由于建立TCP连接的过程需要来回3次&#xff0c;所以&#xff0c;将这个过程形象的叫做三次握手。 结合上面的图来看更清楚。 先说三次握手吧&#xff0c;连接是后续数据传输的基础。就像我们打电话一样&#xff0c;必须保证我和对方…
阅读更多...
c++习题10-骑士得到的金币数

c++习题10-骑士得到的金币数

目录 一&#xff0c;题目 二&#xff0c;思路 三&#xff0c;代码 一&#xff0c;题目 二&#xff0c;思路 阅读题目之后可以列出如下的数字&#x1f447; 观察上图有如下思路&#xff08;主要是找到规律&#xff09; 给个for循环包裹住需要处理的语句&#xff0c;循环…
阅读更多...
k8s快速部署一个网站

k8s快速部署一个网站

1&#xff09;使用Deployment控制器部署镜像&#xff1a; kubectl create deployment web-demo --imagelizhenliang/web-demo:v1 kubectl get deployment,pods[rootk8s-matser ~]# kubectl get pods NAME READY STATUS RESTARTS A…
阅读更多...
The Web3 社区 Web3 产品经理课程

The Web3 社区 Web3 产品经理课程

概述 / 深耕区块链行业 11 年&#xff0c;和很多产品经理都打过交道&#xff1b;遇到过优秀的产品经理&#xff0c;也遇到过比较拉垮的产品经理。多年工作中&#xff0c;曾在某些团队&#xff0c;承载技术兼产品经理的角色&#xff1b;也参与过很多 Web3 外包项目&#xff0c;包…
阅读更多...
【研路导航】成功保研面试：避免迷惑发言，掌握关键表达技巧

【研路导航】成功保研面试：避免迷惑发言，掌握关键表达技巧

更多保研&#xff0c;夏令营&#xff0c;预推免与信息时间节点资讯可以在文章末尾领取&#xff01; 写在前面 在保研面试的过程中&#xff0c;准备充分是成功的关键。每年的夏令营都是竞争激烈的时刻&#xff0c;而如何在面试中展现出最佳的自我&#xff0c;不仅是一场考验&a…
阅读更多...
java实战项目-学生管理系统（附带全套源代码及其登录注册功能的实现）--《进阶篇》

java实战项目-学生管理系统（附带全套源代码及其登录注册功能的实现）--《进阶篇》

一、前言 新增了登录注册的功能&#xff0c;代码量可能会有点大&#xff0c;所有代码加起来差不多560行。这个项目对于小白来说肯定是一大难关了。文章中的每张图都是作者亲手绘制的&#xff0c;简单明了&#xff0c;如果大家认同作者&#xff0c;希望可以支持一下作者。全套源…
阅读更多...
elasticsearch 查询超10000的解决方案

elasticsearch 查询超10000的解决方案

前言 默认情况下&#xff0c;Elasticsearch集群中每个分片的搜索结果数量限制为10000。这是为了避免潜在的性能问题。 但是我们 在实际工作过程中时常会遇到 需要深度分页&#xff0c;以及查询批量数据更新的情况 问题&#xff1a;当请求form size >10000 时&#xff0c…
阅读更多...
【从0到1进阶Redis】主从复制 — 主从机宕机测试

【从0到1进阶Redis】主从复制 — 主从机宕机测试

上一篇&#xff1a;【从0到1进阶Redis】主从复制 测试&#xff1a;主机断开连接&#xff0c;从机依旧连接到主机的&#xff0c;但是没有写操作&#xff0c;这个时候&#xff0c;主机如果回来了&#xff0c;从机依旧可以直接获取到主机写的信息。 如果是使用命令行&#xff0c;来…
阅读更多...
制作显卡版docker并配置TensorTR环境

制作显卡版docker并配置TensorTR环境

感谢阅读 相关概念docker准备下载一个自己电脑cuda匹配的docker镜像拉取以及启动镜像安装cudaTensorRT部署教程 相关概念 TensorRT是可以在NVIDIA各种GPU硬件平台下运行的一个模型推理框架&#xff0c;支持C和Python推理。即我们利用Pytorch&#xff0c;Tensorflow或者其它框架…
阅读更多...
电影购票小程序论文（设计）开题报告

电影购票小程序论文（设计）开题报告

一、课题的背景和意义 随着互联网技术的不断发展&#xff0c;人们对于购票的需求也越来越高。传统的购票方式存在着排队时间长、购票流程繁琐等问题&#xff0c;而网上购票则能够有效地解决这些问题。电影购票小程序是网上购票的一种新型应用&#xff0c;它能够让用户随时随地…
阅读更多...
Vulnhub靶场DC-3-2练习

Vulnhub靶场DC-3-2练习

目录 0x00 准备0x01 主机信息收集0x02 站点信息收集0x03 漏洞查找与利用1. joomla漏洞查找2. SQL注入漏洞3. 破解hash4. 上传一句话木马5. 蚁剑连接shell6. 反弹shell7. 提权 0x04 总结 0x00 准备 下载链接&#xff1a;https://download.vulnhub.com/dc/DC-3-2.zip 介绍&#…
阅读更多...
自适应大气简约健康实木地板生产企业网站模板源码 带完整的安装代码包以及搭建教程

自适应大气简约健康实木地板生产企业网站模板源码 带完整的安装代码包以及搭建教程

系统概述 在当今数字化时代&#xff0c;企业的在线形象直接关联到其市场竞争力。对于专注于生产高品质、健康环保实木地板的企业而言&#xff0c;一个专业、大气且能完美展示产品特色的官方网站尤为重要。为了满足这一需求&#xff0c;我们精心打造了一款“自适应大气简约健康…
阅读更多...
Chromium CI/CD 之Jenkins实用指南2024-如何创建新节点(三)

Chromium CI/CD 之Jenkins实用指南2024-如何创建新节点(三)

1. 前言 在前一篇《Jenkins实用指南2024-系统基本配置&#xff08;二&#xff09;》中&#xff0c;我们详细介绍了如何对Jenkins进行基本配置&#xff0c;包括系统设置、安全配置、插件管理以及创建第一个Job。通过这些配置&#xff0c;您的Jenkins环境已经具备了基本的功能和…
阅读更多...
Qt基础 | Qt Creator的基本介绍与使用 | 在Visual Studio中创建Qt项目

Qt基础 | Qt Creator的基本介绍与使用 | 在Visual Studio中创建Qt项目

文章目录 一、Qt Creator的基本介绍与使用1.新建一个项目2.项目的文件组成3.项目文件介绍3.1 项目管理文件3.2 界面文件3.3 主函数文件3.4 窗体相关的文件 4.项目的编译、调试与运行 二、在Visual Studio中创建Qt项目 Qt C开发环境的安装&#xff0c;请参考https://liujie.blog…
阅读更多...
HTTP背后的故事：理解现代网络如何工作的关键（一）

HTTP背后的故事：理解现代网络如何工作的关键（一）

一.HTTP是什么 概念 &#xff1a; 1.HTTP ( 全称为 " 超文本传输协议 ") 是一种应用非常广泛的 应用层协议。 2.HTTP 诞生与1991年. 目前已经发展为最主流使用的一种应用层协议. 3.HTTP 往往是基于传输层的 TCP 协议实现的 . (HTTP1.0, HTTP1.1, HTTP2.0 均为 T…
阅读更多...
使用 HttpServlet 接收网页的 post/get 请求

使用 HttpServlet 接收网页的 post/get 请求

前期工作&#xff1a;部署好 idea 和 一个 web 项目 idea(2021),tomcat(9) ->创建一个空的项目 -> 新建一个空的模块 -> 右键单击模块 选择 Add..Fra.. Sup.. -> 勾选Web App...后点击OK -> 点击 file - Project Struc... -> 选择刚刚的模块 -> 点…
阅读更多...
Centos 使用nfs配置共享目录使docker集群所有容器日志统一主机访问

Centos 使用nfs配置共享目录使docker集群所有容器日志统一主机访问

Centos 使用nfs配置共享目录&#xff0c;使docker集群所有容器日志统一存放在主机一个共享目录下&#xff0c;供开发人员访问查看 准备两台或以上Centos服务器 192.168.0.1 nfs服务器 192.168.0.2 nfs客户端 以root用户登录192.168.0.1服务器&#xff0c;执行以下操作 注意先…
阅读更多...
vue里完成一个简单的评论功能，博客必备

vue里完成一个简单的评论功能，博客必备

效果展示 步骤 1-表单收集输入信息 <div class"commentorInfo"><div style"position: relative"><i class"fa fa-user"style"position:absolute;top: 50%;transform: translateY(-50%)translateX(8px)"></i>…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023