虽然有人说Windows并不是很好的开发环境, 但是Widwonw确实是使用最广的PC端操作系统, 现在微软也很努力在改善Windows的功能和开发体验. 因此还是主要介绍Windows下的开发环境. 当然也会尽量选择能兼容各平台的技术,尽可能不依赖特定平台.
首先是磁盘路径. 在Windows下分区用字母区分, Linux下都是以根路径开始, 分区挂载到文件夹下. 在msys2的shell环境中, 会把Windows下的D盘E盘等挂载为/D,/E, 我们也借鉴这一思路, 不过有时也会挂载到/mnt下. 常用文件夹的分类和命名也遵循UNIX传统, 使用小写字母短名称. 比如, 我会把软件安装在app目录下, 下载文件保存在net目录下, 临时文件也是用tmp目录, 一些运行环境放在rt目录下, rt是runtime的简写. 开发的项目放在dev目录下. 建立一个专门存放快捷方式的文件夹, 把常用软件的快捷方式加入其中. 因为平时主要使用绿化版的软件, 避免和系统耦合, 如果需要命令行打开, 也可以使用链接, 建立一个存放链接的目录, 并加入path变量中, 原则是各种dll依赖库, vc运行时之类也可以这样管理, 不过需要时间去收集整理, 用的不多的话也可以直接安装进系统文件夹.
具体到前端开发, 除了浏览器和编辑器, node.js也是不开少的. 由于我主要使用shell环境, 所以会把node的路径写入到shell的path里.
alias de="deno run -A"
export PATH=/f/rt/node:$PATH
同时在用户目录下建立.bashrc文件, 每次启动shell时执行这一脚本设置环境.
source /f/path.sh
如果需要在cmd中设置环境变量, 方法也是类似的, 建立path.bat文件, 写入以下内容
@doskey ls=dir
set path=F:\rt\node\;%path%
想要自动运行的话, 需要修改注册表
Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Command Processor]
"AutoRun"="E:\\path.bat"
deno目前也在快速发展, 有些时候使用起来还是挺方便的, 所以也会下载. 上面的alias命令就是为deno设置运行命令用的.
Windows下开发目前主要使用HbuilderX, 除了集成shell工具和git工具之外, 主要就是代码格式的设置. 默认是使用js-beautify进行格式化, 可以按照个人喜好, 修改配置文件. 因为我比较喜欢一行代码作为一个相对独立的逻辑单元, 便于掌握代码的整体结构. 语法元素是实现细节, 是多变的, 但是代码的整体逻辑结构是根据业务需求决定的, 是相对稳定的. 代码格式应该优先体现逻辑结构, 然后才是语法细节. 我主要做了如下修改.
完整的配置文件如下
module.exports = {
parsers: {
".js": "js",
".json": "js",
".njs": "js",
".sjs": "js",
".wxs": "js",
".css": "css",
".nss": "css",
".wxss": "css",
".acss": "css",
".ttss": "css",
".qss": "css",
".html": "html",
".ux": "html",
".wxml": "html",
".nml": "html",
".vue": "html",
".nvue": "html",
".axml": "html",
".swan": "html",
".ttml": "html",
".qml": "html"
},
options: {
"indent_size": "1",
"indent_char": "\t",
"indent_with_tabs": false, //使用tab缩进
"eol": "\r\n", //行结束符
"end_with_newline": false, //使用换行结束输出
"indent_level": 0, //起始代码缩进数
"preserve_newlines": true, //保留空行
"max_preserve_newlines": null, //最大连续保留换行符个数。比如设为2，则会将2行以上的空行删除为只保留1行
"space_in_paren": false, //括弧添加空格 示例 f( a, b )
"space_in_empty_paren": false, //函数的括弧内没有参数时插入空格 示例 f( )
"jslint_happy": false, //启用jslint-strict模式
"space_after_anon_function": false, //匿名函数的括号前加空格
"brace_style": "collapse,preserve-inline", //代码样式，可选值 [collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline
"unindent_chained_methods": false, //不缩进链式方法调用
"break_chained_methods": false, //在随后的行中断开链式方法调用
"keep_array_indentation": false, //保持数组缩进
"unescape_strings": false, //使用xNN符号编码解码可显示的字符
"wrap_line_length": 1200,
"e4x": false, //支持jsx
"comma_first": false, //把逗号放在新行开头，而不是结尾
"operator_position": "before-newline",
"unformatted": ["wbr"],
"html": {
"indent_handlebars": true,
"indent_inner_html": true,
"indent-scripts": "normal", //[keep|separate|normal]
"extra_liners": [], //配置标签列表，需要在这些标签前面额外加一空白行
"wrap_attributes": "preserve" //html属性是否换新行【auto自动，force强制换行,preserve保护现有格式 】 wrap_attributes配置参数： 将属性换行到新行。“auto”，“force”，“force-aligned”，“force-expand-multiline”，“align-multiple”，“preserve”或“preserve-aligned” “auto”
},
"css": {
"brace_style": "collapse",
"selector_separator_newline": false,
"newline_between_rules": false
}
}
}
关于CSS的定制格式化, 由于官方提供的选项太少, 需要修改源码实现. 参考hbuilder设置html格式,Hbuilder中如何设置格式化CSS代码为单行_家庭影院的博客-CSDN博客这篇文章的思路, 看了一下目前的版本, 需要修改HBuilderX\plugins\format\node_modules\js-beautify\js\src\css\beautifier.js文件. 代码较多, 主要是去掉this._output.add_new_line方法调用和this.eatWhitespace方法调用. 完整代码可在doc/beautifier.js · Onesimu/u.js - 码云查看. 格式化之后的效果如下, CSS属性名用的是简写, 参考dev/qcs.js · Onesimu/u.js - 码云
.f2 { w: 154; h: 154; mt: 200; bd: 2 s #F1F1F1; bo: 50%; bgi: url(/static/images/logo.png); }
.f4 { fw: bd; f: 48; c: #333; m: 36 a; }
.f1 { w: 158; h: 2; bgi: lg(270deg, #B1B1B1 0%, rgba(213, 213, 213, .5) 95.59%); opacity: 0.2; }
.f3 { f: 36; c: #999; mb: 150; }
.f5 { f: 30; c: #999; mt: 30; }
.f6 { w: 670; h: 100; f: 36; c: #fff; bgc: #31C569; bsd: 0 3px 19px rgba(49, 197, 105, .3); bo: 77; ti: 3ex; }
如果要在Linux下使用, HbuilderX目前没有Linux版, 据说可以用wine运行, 我没测试成功, 所以目前还是用sublime. sublime也有js-beautify插件.
使用sumlime时, 主要会添加这些设置:
{
"color_scheme": "Packages/themes/Boxy Solarized Light.tmTheme",
"font_size": 14,
"index_files": false,
"sublime_merge_path": "E:/app/sublime_merge/sublime_merge.exe",
"tab_size": 2,
"translate_tabs_to_spaces": true,
"word_wrap": "false",
}
使用的颜色主题是网上寻找的, 感觉比较接近绿柔效果的主题.
浏览器目前使用的是微软新的Edge浏览器. 因为官网找不到离线压缩包, 使用的是爱好者维护的解压包, 可以访问奔跑中的奶酪获取. 几个常用的命令行参数
-inprivate 默认打开隐私模式, 可以加快浏览器打开速度
--allow-file-access-from-files 允许本地网页访问网络, 方便测试本地网页
--disable-web-security --user-data-dir=E:\tmp\EdgeDevUserData 允许跨域访问
--custom-devtools-frontend=file:///E:/dev/devtool/front_end/ 使用自定义的开发者工具
--remote-debugging-port=9221 开启远程调试端口
最后两个是定制开发者工具时需要用到的. 平时可以不用. 这些参数可以加在快捷方式的属性里. 为了方便不同场景的使用, 可以多复制几个快捷方式, 设置不同的参数.
另外一个对国内开发人员比较实际的问题就是科学上网, 没有什么免费又稳定的工具, 不过我个人感觉多数资料在国内都有镜像或备份, 经常需要访问的只有github, 有时候确实速度太慢, 好在有开发者做出了FastGithub加快访问速度. 可以先在gitee上下载旧版, 运行成功之后再到github上下载最新版.
有时候需要在本地安装数据库进行测试, 目前比较流行的开源数据库是PostgreSQL和Mysql. 两者都有压缩包下载. 先说PostgreSQL, 官网下载压缩包之后解压, 命令行运行
bin\initdb -D data -U postgres -A password -E utf8 --locale=C -W
初始化数据库, 设置用户名和密码, 完成之后运行
bin\pg_ctl -D data start
启动数据库.可以参考PostgreSQL zip压缩包安装使用（Window10环境，PostgreSQL 11.2）_勿忘初心_kk的博客-CSDN博客_postgresql zip
客户端GUI工具可以选择官方的pgadmin, 也可以用开源的HeidiSQL. Navicat需要付费, 所以用的不多.
Mysql也类似, 官网下载压缩包, 解压, 命令行运行
mysqld --initialize --console
然后启动mysqld, 初次连接时会设置密码. 为了不侵入系统, 我们不安装系统服务, 而是直接在命令行启动, 在bat文件中写入以下命令运行.
start mysqld --console
现在也有很多用MariaDB或者其他替代品, 方法都是类似的.
数据库管理工具目前是使用HeidiSQL - MariaDB, MySQL, MSSQL, PostgreSQL and SQLite, 可以管理多种数据库, 并且免费使用. FTP工具目前用WinSCP :: Official Site :: Download, 在Windows下使用还是不错的. SSH连接工具目前直接使用git-shell中带的命令行工具, WinSCP中也可以执行一些简单命令, 目前还没有找到更满意的工具.
