jsliang 的插件

听说你在找我？扫描下面二维码加我微信：

一目录

不折腾的前端，和咸鱼有什么区别

目录
一目录
二前言
三功能列表
3.1 snippets 提示
3.2 快捷键
3.3 跳转功能
3.4 Markdown 自动生成目录
3.5 快速 git commit
3.6 日志模板和自动统计日志完成
四参考文献

二前言

本插件主要是为解决个人写文章或者工作中的一些问题而开发。

常用命令 & 网址

安装 yeoman 脚手架工具：npm i yo -g
安装 VS Code 代码生成器：npm i generator-code -g
安装打包工具 vsce：npm i vsce -g
新建项目：yo code
进入开发：Ctrl/Fn + F5
打开命令行：Ctrl/Command + Shift + P
本地打包：vsce package
创建 Microsoft 账号：https://login.live.com/
通过 Microsoft 账号注册 Azure 账号：https://aka.ms/SignupAzureDevOps
线上发布地址：https://marketplace.visualstudio.com/manage

三功能列表

3.1 snippets 提示

snippets 提示：

【html】!!：生成 H5 代码模板
【js】react_template：生成 React 无状态组件代码模板
【jsx】react_class：生成 React 类组件代码模板
【jsx】import：生成 import 导入代码模板
【md】template：生成 jsliang 日常文章模板
【md】leetcode_template：生成 jsliang 刷 LeetCode 每日一题的文章模板
【md】time：生成时间注释
【md】update_time：生成最新时间
【md】category：生成目录模板
【md】ads：公众号 + 文档声明
【md】js：js 代码块
【md】html：html 代码块
【md】css：css 代码块

注意：由于 VS Code 默认没有开启 Markdown 的提示，所以不仅仅是这个插件，原本它内置的提示内容，例如 link 等都不会出现（很奇怪的点，花了几个钟才解决）。

所以需要通过 Ctrl/Command + Shift + P，然后输入 setting，找到【首选项：打开工作区设置（JSON）】，然后进行设置：

{
	"[markdown]": {
		"editor.quickSuggestions": {
			"other": true,
			"comments": false,
			"strings": true
		},
	},
}

这样它就可以开启 Markdown 的提示了~

3.2 快捷键

Ctrl/Command + Shift + I：对函数进行注释。
Ctrl/Command + Shift + J：格式转换 text_style -> textStyle -> TextStyle -> TEXT_STYLE -> text-style（需选中对应文本，再进行转换）。

3.3 跳转功能

在 VS Code 的 JSX 文件中，用户可以通过 Ctrl/Command + 点击 跳转到对应的 JS 文件，但是无法跳转到 CSS 文件，对此，jsliang 的插件进行了拓展，支持跳转到对应的插件上。

在 JSX 文件中通过 import ... from ... 导入的 CSS，通过 Ctrl/Command + 点击 跳转到对应文件中。

同时，通过梳理调整，在 src 目录下，使用 Command/Ctrl + 点击，支持 4 种格式的跳转：

import ... from './../' —— 有相对路径
import ... from 'src/...' —— 有 src 的绝对路径
import ... from 'index' —— js 文件不添加后缀的（index.js）
import ... from 'Table' —— jsx 文件引用 jsx 文件的时候不添加后缀

3.4 Markdown 自动生成目录

在你 Markdown 乱七八糟的目录下，点击右键，选择【生成目录】，那么可以直接生成一个新的目录，而且具备导向功能。

如果你更新了文章内容，添加或者删除了标题，那么再点击【生成目录】，它会帮你更新你的旧目录。

all is well!

就跟你用 Word 一键生成目录一样方便！

基于上面功能，进行了补充：

MD：初始化序列号：序列化文档，不会生成目录
MD：生成简化版目录：让文档支持不适配 <a> 标签的网站
MD：生成目录：原生成目录的方式
MD：统计日志：番茄统计法的内容

3.5 快速 git commit

当你厌烦了修改一个文件提交一次，需要下面这般恶心的命令之后：

git add .
git commit -m "xxx"

那就右键提交或者直接到 VS Code 右下角的状态栏点击 commitSuccess 或者 commit 吧。

它会帮你保存当前的 .md 文件（注意当前仅仅开发了 Markdown 文件），然后将第一行作为 commit 信息：

git add xxx.md
git commit -m "文章标题"

在你干完活之后，你只需要再轻轻输入 git push 并回车即可！

3.6 日志模板和自动统计日志完成

功能 1：在 md 文件输入 log，自动生成当天日志模板

功能 2：右键菜单栏，点击【日志统计】可以统计当天日志完成情况

功能 3：右下角 bar 条，点击【日志统计】也可以统计当天日志完成情况

四参考文献

在开发 Visio Studio Code 插件的过程中，查阅了很多插件，最让我看得舒适的是小茗同学的系列文章：

当然，当中有一些点，因为时间差异，可能 VS Code 对此进行了变更，所以各位小伙伴自行找解决方案了。

VS Code 文档

整体参考文献：

自动生成目录参考文献：

终端监听自定义命令：

jsliang