「Tips」Notepad++ 简单配置指南——使其适合前端开发

2018.3.28 : 已经成为坚实的 vim 党,将会在近期出一个 vim 手动配置的详解,以及使用简介

因为 Notepad++ 轻便快速的特性,所以我一直把他作为主力纯文本编辑器(才不是因为习惯了,懒了,而不愿去使用 vim(已经成为坚实的 vim 党) 和 sublime 之类的//∇//)○),但是它的初始设置并不是很适合前端开发,接下来跟我一起来调教调教她吧

@Clarke——拖了很长时间了,抱歉啦

高亮和字体设置


Notepad++ 的默认高亮和字体效果一般般(其实我很想说很难看=v=),所以我们可以选择换个主题
只需要打开 设置>语言格式设置 即可选择你自己喜欢的主题了(估计开发者也自知默认的不好看,所以把换主题做的这么方便把=v=)

ss-4-wp-170609-notepad-guide-x01.png

语言格式设置界面

我这里选择的是 Mono Industrial 主题,大家可以自己一个个试找到自己喜欢的主题,顺便做下 Mono Industrial 的展示:

ss-4-wp-170609-notepad-guide-x02.png

Mono Industrial 主题

CSS 属性和 HTML 标签自动补全


关键字自动补全是必须的,不然实在敲代码不能啊,会被累死的=v=

Notepad++ 的自动补全默认情况下是开启的,如果你的自动补全有问题,请先确认你编辑的文件后缀名是否正确。举个栗子,你编辑一个 txt 文件的话,在 Notepad++ 里面是不会实现任何补全的;你编辑一个 sql 文件, Notepad++ 就只能实现 sql 语句的关键词补全

如果你确认文件后缀名没问题之后,还是没能实现自动补全,请参考下图检查是否已开启(首选项>自动完成>参数与单词):

ss-4-wp-170609-notepad-guide-01.png

检查自动完成设置

如果你还是不能实现补全的话...自己找原因把= =

使用 Emmet 插件提高编码速度


使用过前端相关 IDE 或者 Sublime 之类的文本编辑器的话,应该都知道 Emmet 是干什么的,我这里就不做说明了,接下来就说说如何在Notepad++ 上安装配置 Emmet 把。

Notepad++ 提供了在线安装插件的管理器,这很方便。而在 Notepad++ 上安装 Emmet 的前置条件是安装 Python Script 插件,如果你使用插件管理器进行安装,只需要打开管理器>找到 Emmet>安装,它就会提醒你安装 Python Script ,点击确定即可。在 Instlled 选项卡找得到 Python Script 和 Emmet 就说明你安装成功了

ss-4-wp-170609-notepad-guide-02.png

扩展管理器界面

但是, Notepad++ 的插件自动安装是从 Github 拉取数据的,因为众所周知的原因,经常会出现安装异常缓慢甚至安装失败的情况

如果你没有能力解决网络问题的话,这里提供手动安装的方法

下载地址:
PythonScript_full_0.9.2.0
Emmet的Notepad++插件

Emmet 的安装比较简单,下载完解压后复制到 Notepad++ 安装目录的 plugins 下即可。

Python Script 的安装则稍稍复杂,下载完 PythonScript_full_0.9.2.0.zip 后解压,将 python27.dll 文件复制到 Notepad++ 安装目录的根目录下,同时在 plugins 文件夹中的全部内容复制到 Notepad++ 安装目录的 plugins 下。
为表达清楚,摘录 Python Script 的目录结构如下:

安装完 Emmet 后,建议更改 Expand Abbreviation 的键盘快捷键为 Tab 键。

打开 Notepad++Settings > Shortcut Mapper…对话框,切换到 plugin commands,选中 Expand Abbreviation 项,修改其快捷键为 Tab 键即可。

ss-4-wp-170609-notepad-guide-03.png

快捷管理界面

然后你就可以愉快得 !+tab 实现初始化 html5 之类的快捷操作了

还有...没有了,暂时就是这么多,另外感谢 @秋水逸冰 大神的文章提供的参考,需要参拜原文的请自行食用

参考链接:Notepad++插件Python Script和Emmet的安装

3 评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注