sublime和vscode常用高效插件及文件模板新建与git国内下载地址

谁践踏了优雅 2024-04-18 07:16 23阅读 0赞

## 1.sublime常用插件 ##

列举sublime编辑器常用插件如下：

1.  Emmet
    
    功能：编码快捷键，前端必备。
2.  JSFormat
    
    功能：JavaScript的代码格式化插件。
3.  LESS
    
    功能：LESS高亮插件。
4.  Less2CSS
    
    功能：编译Less。
    
    简介：监测到文件改动时，编译保存为.css文件。
5.  Git
    
    功能：Git管理。
6.  Markdown Preview
    
    功能：md格式文件预览。
7.  Markdown Editing
    
    功能：md格式文件编辑。

## 2. sublime模板生成 ##

1.工具 —— 插件开发 —— 新建代码片段。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]

然后会自动创建一个文件，填入你的代码模板 <!\[CDATA\[

//这里填入你的代码模板

\]\]>

tabTrigger 标签中是自己定义的触发命令。

如下：

<content><![CDATA[
    <template>
    	<div>
    		
    	</div>
    </template>
    
    <script>
    	export default { 
    		data(){ 
    			return{ 
    
    			}
    		}
    	}
    </script>
    
    <style scoped>
    	
    </style>
    ]]></content>
    	<tabTrigger>vue</tabTrigger>

然后Ctrl + S 保存文件，名称随意，但是文件后缀必须是 .sublime-snippet。如下就实现了输入vue快捷输出vue组件模板内容了。：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]

新建一个文件，输入命令 vue，按下Tab 键，刚刚设置的模板就自动生成了。

## 3.vscode常用插件 ##

在vscode左侧点击扩展，在input框中输出插件名称，点击install安装即可。

1.  文件图标 **vscode-icons**
    
    vscode-icons 插件可以实现对各种文件类型的文件前的图标进行优化显示，这样我们在查看长长的文件列表的时候，可以直接通过文件的图标就可以快速知道文件的类型，而不是去看文件的后缀。。
2.  代码美化 **Beautify**
    
    Beautify 插件可以快速格式化你的代码格式，让你在编写代码时杂乱的代码结构瞬间变得非常规整，代码强迫症必备，较好的代码格式在后期维护以及他人阅读时都会有很多的便利。
3.  代码检查工具 **ESLint**
    
    ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。
    
    一个团队可以共享同一个配置文件，这样一个团队所有人写出的代码就可以使用同一个代码规范，在代码签入前每个人可以完成自己的代码规范检查。
4.  调试工具 **Debugger for Chrome**
    
    调试工具就是前端开发必备，大大地改变你的开发与调试模式。
    
    以往的前端调试，主要是 JavaScript 调试，你需要在 Chrome 的控制台中找到对应代码的部分，添加上断点，然后在 Chrome 的控制台中单步调试并在其中查看值的变化。
    
    而在使用了 Debugger for Chrome 后，当代码在 Chrome 中运行后，你可以直接在 VSCode 中加上断点，点击运行后，Chrome 中的页面继续运行，执行到你在 VSCode 中添加的断点后，你可以直接在 VSCode 中进行单步调试。
5.  代码拼写检查 **Code Spell Checker**
    
    在代码中有单词拼写错误时，你就会发现这个插件的好处，因为我们写代码毕竟都是大量的英文单词变量定义，插件还可以给出错误拼写单词的建议。
6.  备忘插件 **TODO Highlight**
    
    在很多的其他代码编辑器中都有 TODO 标注功能的，如你写到某一部分的代码时，其中部分的功能需要稍后再来实现，这是就可以在对应的代码处添加一个 TODO 类型的注释，那么后期就可以快速地跳转到这部分继续写，而且当项目很大的时候，TODO 就变得更加有用，因为有时候 TODO 可能有几十个，帮助你标注那些功能需要继续实现或优化。
7.  HTML文件预览插件 **view in browser**
    
    安装后在文件列表选中要预览的HTML文件，鼠标右键选择view in browser就可以实现在浏览器中显示。
8.  git提交记录
    
    ![这两个插件][20200519175036425.png]
9.  中文包插件 Chinese (Simplified) Language Pack for Visual Studio Code

## 4.git国内下载地址 ##

git官网下载几乎不可能下载成功，网速被限制。国内下载地址为：

[git国内下载地址][git] https://github.com/waylau/git-for-win

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a1988a589d3f443bbb163e12cc8af3e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/af84d62e3058492b8d68c98c346d49e0.png
[20200519175036425.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5df8bf9b634f4588b506f376a0a3188f.png
[git]: https://github.com/waylau/git-for-win