Windows
准备知识：
在 sublime 编辑器任意位置键入[ ctrl + shift + p ] => 选择命令"Package Control: Install Package"可以选择需要的扩展包进行安装。文章之后用“包安装”一词来替代此操作。
一、语法高亮：Babel
开发 Reactjs 代码当中频繁包括 ES6+ , js , jsx 语法，选择安装此扩展包足以正确高亮显示前述所有语法。同时可以通过 "View => Syntax => Open all with current extension as... => Babel => JavaScript(Babel)"来进行以后所有打开文件的默认识别语法。
二、代码整理：prettier
依赖 nodejs (npm/yarn)
1.随意找个位置打开命令行
npm install prettier -g
结束后 prettier 已被安装至全局，位置一般是： C:\Users\zhangbc\AppData\Roaming\npm\node_modules\prettier\bin-prettier.js
(注意：zhangbc是我的用户名，你们的计算机肯定不一样)
2.在 sublime 包安装中找到 JsPrettier 安装，然后配置其 Setting-Users
{
"debug": false,
"prettier_cli_path": "C:/Users/zhangbc/AppData/Roaming/npm/node_modules/prettier/bin-prettier.js",
"node_path": "C:/Program Files/nodejs/node.exe",
"auto_format_on_save": false,
"auto_format_on_save_excludes": [],
"allow_inline_formatting": false,
"custom_file_extensions": [],
"max_file_size_limit": -1,
"additional_cli_args": {},
"prettier_options": {
"printWidth": 80,
"singleQuote": false,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"parser": "babylon",
"semi": true,
"requirePragma": false,
"proseWrap": "preserve",
"arrowParens": "avoid"
}
}
注意 prettier_cli_path 和 node_path 你们的电脑可能不一样
3.配置整理代码快捷键：(直接在 sublime 全局配)
添加对象:
{
"keys": ["ctrl+q"],
"command": "js_prettier"
}
MacOS
准备知识：
在 sublime 编辑器任意位置键入[ command + shift + p ] => 选择命令"Package Control: Install Package"
一、语法高亮：Babel
二、代码整理：prettier
依赖 nodejs (npm/yarn)
1.随意找个位置打开命令行
npm install prettier -g
2.在 sublime 包安装中找到 JsPrettier 安装
3.配置整理代码快捷键：(直接在 sublime 全局配)
sublime3-截图.png
Key Bindings 添加对象:
{
"keys": ["command+e"],
"command": "js_prettier"
}
至此代码整理配置已完成。
——————————————————————
【文章维护记录】：2019-06-03
今日突然发现好好的prettier用着就挂了，并且jsprettier已经搜索不到了，这是因为此插件被合并至html-css-js prettier。下载并安装此插件即可修复格式化代码失效的问题。如果找不到此插件，安装ReactJS代替也可。
【文章维护记录】：2020-08-31
近日尝试设置xcode js 代码格式化未果，只能转战sublime。
----------------- 结束线 --------------------
网友评论