Notepad++ 中如何对 HTMLCSSJS 格式化？

2023-03-07 12:30:02JavaScript011

Notepad++ 中如何对 HTMLCSSJS 格式化？,第1张

插件管理器找JSTool

本意只是对JS格式化的插件，拿来格式化CSS还是可以的，但是对html格式化可能会有点问题。xhtml可以用XML Tools，普通html可以用TextFX。

——————————

现在通过插件管理器下载的最新版TextFX里面是缺少Tidy模块的，可以下载Notepad++5.8或更早版本的程序包，从里面提取Tidy模块。另外Tidy2插件也可以试试，不过下载地址是谷歌的。需要注意这两个插件目前只支持32位的Notepad++。

1、vs code安装插件eslint2、文件 - 首选项 - 设置 - json配置3、粘贴以下JSON配置，保存{// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,// 重新设定tabsize"editor.tabSize": 2,// #每次保存的时候自动格式化"editor.formatOnSave": true,// #每次保存的时候将代码按eslint格式进行修复"eslint.autoFixOnSave": true,// 添加 vue 支持"eslint.validate": ["javascript","javascriptreact",{"language": "vue","autoFix": true}],// #让prettier使用eslint的代码格式进行校验"prettier.eslintIntegration": true,// #去掉代码结尾的分号"prettier.semi": false,// #使用带引号替代双引号"prettier.singleQuote": true,// #让函数(名)和后面的括号之间加个空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,// #这个按用户自身习惯选择"vetur.format.defaultFormatter.html": "js-beautify-html",// #让vue中的js按编辑器自带的ts格式进行格式化"vetur.format.defaultFormatter.js": "vscode-typescript","vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "aligned-multiple"},"prettyhtml": {"printWidth": 100,"singleQuote": false,"wrapAttributes": false,"sortAttributes": false}},// 格式化stylus, 需安装Manta's Stylus Supremacy插件"stylusSupremacy.insertColons": false, // 是否插入冒号"stylusSupremacy.insertSemicolons": false, // 是否插入分好"stylusSupremacy.insertBraces": false, // 是否插入大括号"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行"stylusSupremacy.insertNewLineAroundBlocks": false,"window.zoomLevel": 0,"[javascript]": {"editor.defaultFormatter": "vscode.typescript-language-features"}}

首先自身的编码功力得过硬，至于使用工具的目的无非就是为了更快更高效更省事而已；

想要使用sublime text更快速的编码，就必须要使用它的一些插件及快捷键了：

1安装方法一：直接安装

安装Sublime text 3插件很方便，可以直接下载安装包解压缩到Packages目录（菜单->preferences->packages）。

2安装方法二（推荐使用）：使用Package Control组件安装

也可以安装package control组件，然后直接在线安装：

按Ctrl+—— 调出console（注：安装有QQ输入法的这个快捷键会有冲突的，输入法属性设置-输入法管理-取消热键切换至QQ拼音）

粘贴以下代码到底部命令行并回车（sublime text 3）：

import urllib.request,ospf = 'Package Control.sublime-package'ipp = sublime.installed_packages_path（）； urllib.request.install_opener（ urllib.request.build_opener（ urllib.request.ProxyHandler（）））； open（os.path.join（ipp, pf）， 'wb‘）。write（urllib.request.urlopen（ 'http://sublime.wbond.net/' + pf.replace（' ','%20’））。read（））然后重启。如果在Perferences->package settings中看到package control这一项，则安装成功。

粘贴以下代码到底部命令行并回车（sublime text 2）

import urllib2,ospf='Package Control.sublime-package'ipp = sublime.installed_packages_path（）； os.makedirs（ ipp ） if not os.path.exists（ipp） else Noneurllib2.install_opener（ urllib2.build_opener（ urllib2.ProxyHandler（）））； open（ os.path.join（ ipp, pf）， 'wb' ）。write（ urllib2.urlopen（ 'http://sublime.wbond.net/' +pf.replace（ ' ','%20' ））。read（））； print（ 'Please restart Sublime Text to finish installation‘）

用Package Control安装插件的方法：

按下Ctrl+Shift+P调出命令面板

输入install 调出 Install Package 选项并回车：

（1）Zen Coding （又称Emmet）

该插件的作用为快速编写html及css。

（2）jQuery Package for sublime Text

如果你离不开jQuery的话，这个必备——

（3）Sublime Prefixr

Prefixr，CSS3 私有前缀自动补全插件，显然也很有用哇

（4）JS Format

一个JS代码格式化插件。

（5）Sublime Alignment