js格式化插件(用sublime打开JS文件全部在一行,怎么办)

本文目录
- 用sublime打开JS文件全部在一行,怎么办
- Sublime Text中如何对杂乱的代码进行格式化
- HTML代码如何格式化
- 在Vue-cli中使用Eslint如何实现自动格式化
- 怎么让JS文件代码对齐
- 为什么mac sublime有两个程序
用sublime打开JS文件全部在一行,怎么办
其实sublime自身就有格式化命令,就不再安装插件,位置在
但这个默认的命令没有快捷键,就重新定义了一下,想用习惯了的eclipse快捷键:Ctrl+Shift+F但是和“在文件中查找”冲突了。改用Alt+Shift+F吧,和netbeans保持一致。
中,添加如下:
{ "keys": , "command": "reindent" }
如果不行的话 可以装个 jsFormat的插件
Sublime Text中如何对杂乱的代码进行格式化
我们使用Sublime Text文件的时候,经常会遇到一些杂乱无章的内容,那么如何对这些杂乱的内容进行格式化呢?下面我就给大家分享一下。
工具/材料
Sublime Text
首先我们打开Sublime Text软件,新建一个HTML文件,然后在文件中键入一些杂乱的代码,如下图所示
接下来点击顶部的首选项菜单,然后选择下拉菜单中的Package Control选项,如下图所示
在弹出的Package Control界面中输入Ins,Sublime会自动模糊查询相应的内容,我们选择Install Package即可,如下图所示
接下来会进入Install Package界面,我们在输入框里面输入html-css-js prettify,选择第一个按回车键进行安装,如下图所示
安装完毕以后我们点击顶部的工具菜单,然后查看下拉菜单中是否有HTML/CSS/JS Prettify选项,如果有则证明安装成功,如下图所示
回到刚才新建的HTML文件中,我们按ctrl+shift+h组合键以后你会发现刚才杂乱的代码都立刻被格式化了,如下图所示
另外你也可以对Prettify插件进行一些设置,这个时候你点击工具下面的HTML/CSS/JS Prettify选项,然后选择Plugin Options选项即可
最后如果你想格式化其他类型的代码文件,比如SQL语言的,那么你就需要找针对SQL语言的格式化插件了,这里我教大家一招,在命令模式中输入Format就可以调出各种语言的格式化插件了,大家自己选择即可
HTML代码如何格式化
HTML代码可以通过sublime中的内置命令Reindent对代码格式化,还可以安装HTML-CSS-JS Prettify插件对代码格式化
有时候我们将别人的代码复制过来的时候发现代码排列的非常杂乱无章,无法去阅读代码,今天就将和大家介绍如何使用sublime中的插件去格式化代码,有一定的参考作用,希望对大家有所帮助。
【推荐课程:HTML课程】
(1)Sublime的内置Reindent命令
打开路径:Edit--》Line--》Reindent
例:
但是sublime自带的重新缩进功能较为单一,仅仅是保证缩进正常了而已。而对于代码中写法不规范的地方,无法进行处理,它适合在简单的场景下使用,如果有复杂的情况需要安装插件
(2)HTML-CSS-JS Prettify插件
这个插件可用于Sublime Text 2和Sublime Text 3,可以用来处理HTML,CSS,JavaScript以及JSON文件
首先要先安装插件:
ctrl+shift+p打开Package Control: 然后选择install package中输入HTML-CSS-JS Prettify插件并按下enter键,重启sublime
插件安装成功,因为HTML-CSS-JS Prettify插件的使用需要Node.js运行,因此我们还要安装node.js软件,下载好后操作一下步骤“在开始--搜素文件和程序--cmd”
然后在sublime中打开一个html文件,点击右键选择HTML-CSS-JS Prettify下的Plugin Options文件打开,将路径改为安装node软件的路径,如下图
在此插件安装成功
未格式化之前:
格式化之后:
HTML-CSS-JS Prettify插件它没有删除文件中的额外空行或缩进《script》块内的JavaScript ,是一个非常好的插件
(3)HTMLBeautify
该HTMLBeautify插件是假设你的HTML已经部分与单独的行标签格式的一个基本的脚本。它对内联注释不起作用
(4)TidyHTML5
如果您只对格式化HTML5感兴趣,可以选择TidyHTML5插件。虽然它使用外部实用程序来执行格式化,但它为Windows用户捆绑。
总结:
在Vue-cli中使用Eslint如何实现自动格式化
本篇文章主要介绍了Vue-cli Eslint在vscode里代码自动格式化的方法,现在分享给大家,也给大家做个参考。
器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等。
添加对.vue文件的格式化支持
这里我们添加对 .vue 文件的格式化支持。
1. 安装 Vetur 插件
2. 在 VS Code 的设置中添加如下规则:
这里是设置 Vetur 默认使用的格式化插件 prettier。 这样对于.vue文件中的 html 和 javascript 代码都有格式化支持了。
vue eslint 代码自动格式化
vue-cli 代码风格为JavaScript Standard Style 代码检查规范严格,一不小心就无法运行,使用eslint的autoFixOnSave可以在保存代码的时候自动格式化代码
VSCode拓展插件推荐(HTML、Node、Vue、React开发均适用)
建议阅读:
vscode插件推荐
JavaScript Standard Style 代码风格规范
正文 eslint 自动格式化
配置环境:
npm i -g eslint-plugin-vue
#or
npm i -S eslint-plugin-vue创建项目跟路径下的文件:.eslintrc | .eslint.js
//添加插件
"plugins": [
"vue"
]在你的vscode设置文件里添加:
1、在vscode添加 eslint 插件
2、在vscode添加 vetur 插件
3、修改你的setting.json
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
在vue-cli中使用webpack模板解决项目搭建及打包路径问题
在vue中bus全局事件中心(详细教程)
详细解读Angular系列中变化检测问题
怎么让JS文件代码对齐
下载插件:打开Notepad++ ,然后 插件 -- Plugin Manager -- Show Plugin Manager
安装插件:找到 JsTool ,选中,然后点击Install按钮,自动下载安装,重启Notepad++
使用插件:在插件选项里面会多出一个JSTool选项,选择JSFormat就可以格式化对齐了!效果还不错。
为什么mac sublime有两个程序
首先自身的编码功力得过硬,至于使用工具的目的无非就是为了更快更高效更省事而已;
想要使用sublime text更快速的编码,就必须要使用它的一些插件及快捷键了:
1安装方法一:直接安装
安装Sublime text 3插件很方便,可以直接下载安装包解压缩到Packages目录(菜单-》preferences-》packages)。
2安装方法二(推荐使用):使用Package Control组件安装
也可以安装package control组件,然后直接在线安装:
按Ctrl+—— 调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属性设置-输入法管理-取消热键切换至QQ拼音)
粘贴以下代码到底部命令行并回车(sublime text 3):
***隐藏网址***
粘贴以下代码到底部命令行并回车(sublime text 2)
***隐藏网址***
用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
用于代码格式的自动对齐。传说最新版Sublime 已经集成。
(6)JsMinifier
该插件基于Google Closure compiler,自动压缩js文件,可使js文件变的更小
(7)Sublime CodeIntel
代码自动提示
(8)Bracket Highlighter
类似于代码匹配,可以匹配括号,引号等符号内的范围。
(9)Git
该插件基本上实现了git的所有功能,在实际开发使用Git时方便使用
主要快捷键列表:
Ctrl+L 选择整行(按住-继续选择下行)
Ctrl+KK 从光标处删除至行尾
Ctrl+Shift+K 删除整行
Ctrl+Shift+D 复制光标所在整行,插入在该行之前
Ctrl+J 合并行(已选择需要合并的多行时)
Ctrl+KU 改为大写
Ctrl+KL 改为小写
Ctrl+D 选词 (按住-继续选择下个相同的字符串)
Ctrl+M 光标移动至括号内开始或结束的位置
Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)
Ctrl+/ 注释整行(如已选择内容,同“Ctrl+Shift+/”效果)
Ctrl+Shift+/ 注释已选择内容
Ctrl+Z 撤销
Ctrl+Y 恢复撤销
Ctrl+M 光标跳至对应的括号
Alt+. 闭合当前标签
Ctrl+Shift+A 选择光标位置父标签对儿
Ctrl+Shift+[ 折叠代码
Ctrl+Shift+] 展开代码
Ctrl+KT 折叠属性
Ctrl+K0 展开所有
Ctrl+U 软撤销
Ctrl+T 词互换
Tab 缩进 自动完成
Shift+Tab 去除缩进
Ctrl+Shift+↑ 与上行互换
Ctrl+Shift+↓ 与下行互换
Ctrl+K Backspace 从光标处删除至行首
Ctrl+Enter 光标后插入行
Ctrl+Shift+Enter 光标前插入行
Ctrl+F2 设置书签
F2 下一个书签
Shift+F2 上一个书签

更多文章:
进制转换的8421法(十进制如何转换成8421码~~请说方法)
2026年5月11日 00:45
线程和进程的区别是什么 面试(linux进程和线程的区别 面试)
2026年1月20日 03:15
rabbitmq最新版本(rabbitmq3.8.2安装步骤及集群配置)
2025年11月21日 11:00
易语言源码打开停止工作(同样一个易语言源码,为什么在我的电脑上运行就卡死,在别人的电脑上运行是正常的)
2026年5月15日 01:30
powershell快捷键打开(windows10的控制面板在哪里找)
2026年8月7日 07:15
oracle数据库完整性(oracle添加记录的时候提示违反完整性约束,未找到父项关键字怎么解决)
2025年10月15日 22:30
java找不到工作想去送快递了(昌平北大青鸟分享学Java找不到工作的原因)
2026年8月6日 10:45
后台管理系统模板如何使用(开源网店iWeb Shop的模板管理后台怎么操作有什么值得注意的地方)
2025年10月30日 18:15
高级程序设计语言的主要功能(高级语言的控制结构主要包含什么)
2025年12月8日 19:00
mapreduce的优势(hadoop与传统的关系型数据库(如oracle)相比,有什么优势及劣势)
2026年2月12日 15:00
java交互界面怎么做(北大青鸟java培训:常见交互设计表现形式)
2026年3月23日 04:00
pull together(pull together是什么意思)
2026年1月6日 13:30
substantial变形单词(哪些英语单词可以表达 “重要的” 以及它们的区别)
2026年1月13日 17:00
floor和ceil函数(Math之ceil、floor、round区别)
2026年1月22日 22:30
汉化版eclipse(在汉化版eclipse中编写java程序,无法解析start是什么意思)
2025年8月6日 22:30
interesting怎么读英语(“interesting”怎么读)
2026年5月11日 15:45









