前言
: 介绍编写插件的准备和如何发布.
: 介绍插件简单功能的具体编写过程.
: 介绍插件开发遇到的问题和解决的方案
解决问题
换行符
问题描述
开发完以后就美滋滋地开始用了,在格式化之前自己写的一个md,取名为 1.md
时,突然发现每格式化一次后,都会在空行后多出一个空行
解决过程
自己将文件删减到只有两行,依然发现还会多出空行,然后新建一个md文件,,取名为 2.md
,将内容复制拷贝过去以后,发现在 2.md
中可以正确地格式化。这就奇怪了,明明内容是一样的啊,查看两个文件描述,发现相差一个字节。
再想到1.md
是从之前的window
平台拷贝过来,而2.md
是在osx
平台新建的,于是去查了下资料,原来是两个平台的换行符是有差异的。
简单地说, window
平台下的换行符为 \r\n
,而 osx
平台的换行符为\n
。因此,用一段正则统一两个平台的换行符即可。
const LINE_BREAK_EXP = /\r\n/g;复制代码
在这里,稍微提一下。
-
\r
为回车,作用是光标返回当前行首。 -
\n
为换行, 作用为光标移动到下一行。
这两个符号是从打字机开始出现,后来继承到电脑上。
而Unix
平台认为 \n
就阔以了,还省个字节,window
认为 \r\n
才是正统, osx
以前用 \r
,万幸现在和 Unix
一样了。
多次格式化
问题描述
在格式化js代码后,会将代码段(用```包裹的代码)中已经格式化过地代码,再次格式化,出现问题。
例如:
function(){var a = 100; settimeout(function(){console.log('hello')}),100}复制代码
格式化以后
function(){ var a = 100; settimeout(function(){ console.log('hello') },100)}复制代码
再次点击格式化,
function(){ var a = 100; settimeout( function(){ console.log('hello') } ,100)}复制代码
解决过程
这个问题就比较容易发现原因, 是因为被格式化后的代码段中出现了多行以4个空格或者tab开头的行,他们也符合代码块(就是以空格或者tab开头)的匹配规则,因此被重复格式化。
我没有找到更好的正则匹配方式,因此我的思路是,将已经格式化过的代码段从内容中移除,再执行格式化代码块,最后再补全内容。
在这里补充一个格式化的办法
function removeReplace(text: string, reg: RegExp, func: Function): string { const _tempRegArr = text.match(reg) if (_tempRegArr && _tempRegArr.length > 0) { const _tempArr = []; _tempRegArr.forEach((e, i) => { const _reg = new RegExp(escapeStringRegexp(e), 'g'); _tempArr.push(e); text = text.replace(_reg, `$mdFormatter$${i}$mdFormatter$`); }) text = func(text); const _mdformatterArr = text.match(/\$mdFormatter\$\d+\$mdFormatter\$/g) _mdformatterArr.forEach((e, i) => { const _reg = new RegExp(escapeStringRegexp(e), 'g'); text = text.replace(_reg, _tempArr[i]); }) } else { text = func(text); } return text}复制代码
反思优化
依然还是有些不足滴,粗略说一些
1. 用户每次点击 command+shift+f
的时候,都会执行格式化,从效率角度,应当有个变量标记内容是否更改,如果没有更改就直接返回。(已在0.2.1版本实现)
- 目前只支持js的格式化,我想应该也有其他格式的代码的库,作为后续可以扩展的功能。
目前开发了一些功能,算是可以用了,个人格式化了40篇md没有什么问题. 开发两小时,修了两天bug
在vscode插件里查找
git地址在这里~
在这里,star随意,欢迎issues~, 也欢迎大家在vscode中使用,我会持续更新~