前端基础规范
开发IDE
1.webstorm 下载地址，需破解激活或直接下载破解版，功能全能强大，自带git版本管理工具；
2.vscode
3.sublime text
环境
本地环境：windows10 nodejs v8.0.0+
线上：centos7 / ubuntu14.04 nginx v1.12.0+
主开发框架
1.Vue
2.React
3.Jquery
服务端渲染框架
vue -- nuxt
react -- next
打包工具
1.webpack
2.gulp
配套UI
VUE PC
1.iview
2.element
3.ant design
VUE h5
1.vant
2.nut ui 京东开发的移动端UI
React
阿里ant design系列
小程序
iview-weapp https://weapp.iviewui.com/
vant-weapp https://youzan.github.io/vant-weapp/#/intro
weui https://weui.io/ 微信官方UI，设计风格同微信app
其他
bootstrap
基础开发模板框架
开箱即用
1.webpack4 + jquery多页开发 https://github.com/HEJIN2016/webpack4-template
2.vue-cli3 + iview https://github.com/HEJIN2016/vue-iview-template-3
3.vue-cli2 + iview https://github.com/HEJIN2016/vue-iview-template
4.nuxt + iview https://github.com/HEJIN2016/nuxt-iview-template
CMS后台管理框架
1.vue-element-admin https://github.com/PanJiaChen/vue-element-admin
2.**iview-admin **https://github.com/iview/iview-admin
3.d2-admin https://github.com/d2-projects/d2-admin
4.vue-manage-system https://github.com/lin-xin/vue-manage-system
5.（react） ant-design pro https://pro.ant.design/index-cn
常用函数库
lodashjs https://www.lodashjs.com/
rx.js 响应式异步编程库，在vue中需引入vue-rx
jquery
常用前端插件
1.工具库函数 https://github.com/HEJIN2016/js-utils
2.富文本编辑器 https://github.com/HEJIN2016/ushare-editor
3.轮播插件 swiper https://www.swiper.com.cn/
4.可视化图表插件
echarts https://www.echartsjs.com
vcharts https://v-charts.js.org/#/
g2 http://g2.alipay.com/
d3.js https://d3js.org/
highcharts https://www.highcharts.com.cn/
5.http请求 axios
6.图片裁切 cropperjs
7.前端div转canvas生成图片 html2canvas
8.cookie操作 js-cookie
9.时间操作 moment
10.页面加载进度条 nprogress
11.移动端开发 px转rem或者vw、vh postcss
12.数字滚动效果 jquery.countup.js vue-count-to
13.前端加密 crypto-js
14.代码高亮 highlight.js
- markdown文本转html marked.js
- 前端二维码 qrcode
- 防止 xss攻击 xss
- 前端多语言切换 i18n
- 移动端click点击事件优化 fastclick
- meta操作 vue-meta
- js前端签名 jsignature
前端基础动画
1.animate.css
2.animejs
nodejs开发框架
1.express
2.koa
3.egg https://eggjs.org/zh-cn/index.html
版本控制工具git
github：https://github.com/
文件/资源命名
在 web 项目中，所有的文件名应该都遵循同一命名约定。
1.以可读性而言，减号（-）是用来分隔文件名的不二之选。同时它也是常见的 URL 分隔符
2.确保文件命名总是以字母开头而不是数字。而以特殊字符开头命名的文件，一般都有特殊的含义与用处
3.资源的字母名称必须全为小写，这是因为在某些对大小写字母敏感的操作系统中，当文件通过工具压缩混淆后，或者人为修改过后，大小写不同而导致引用文件不同的错误，很难被发现。
4.还有一些情况下，需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css），抑或一串前缀（比如 3fa89b.main.min.css）。这种情况下，建议使用点分隔符来区分这些在文件名中带有清晰意义的元数据。
5.避免使用中文名作为文件名
不推荐
MyScript.js
myCamelCaseName.css
i_love_underscores.html
1001-scripts.js
my-file-min.css
天河.zip
推荐
my-script.js
my-camel-case-name.css
i-love-underscores.html
thousand-and-one-scripts.js
my-file.min.css
tianhe.zip
协议
不要指定引入资源所带的具体协议。
当引入图片或其他媒体文件，还有样式和脚本时，URLs 所指向的具体路径，不要指定协议部分（http:, https:），除非这两者协议都不可用。
不指定协议使得 URL 从绝对的获取路径转变为相对的，在请求资源协议无法确定时非常好用，而且还能为文件大小节省几个字节。
不推荐
推荐
不推荐
.example {
background: url(http://static.example.com/images/bg.jpg);
}
推荐
.example {
background: url(//static.example.com/images/bg.jpg);
}
文本缩进
一次缩进两个空格（非tap，tap在不同编辑器或者操作系统下解释不一致）。
- Fantastic
- Great
Test
注释
注释是你自己与你的小伙伴们了解代码写法和目的的唯一途径。
特别是在写一些看似琐碎的无关紧要的代码时，由于记忆点不深刻，注释就变得尤为重要了。
代码注释，则是永远也不嫌多。
当你写注释时一定要注意：不要写你的代码都干了些什么，而要写你的代码为什么要这么写，背后的考量是什么。当然也可以加入所思考问题或是解决方案的链接地址。
不推荐
var offset = 0;
if(includeLabels) {
// Add offset of 20
offset = 20;
}
推荐
var offset = 0;
if(includeLabels) {
/* If the labels are included we need to have a minimum offset of 20 pixels
We need to set it explicitly because of the following bug: http://somebrowservendor.com/issue-tracker/ISSUE-1*/
offset = 20;
}
代码检查
对于比较宽松自由的编程语言来说，严格遵循编码规范和格式化风格指南就显得极为重要。遵循规范固然很好，但是有自动化流程来确保其执行情况，岂不更佳。Trust is good, control is better.
对于 JavaScript，建议使用 JSLint 或 JSHint。