如何快速开发符合规范的web页_怎么样快速开发web页面-CSDN博客

本文链接：https://blog.csdn.net/bbshare/article/details/44156141

做为前端开发神器Sublime Text（ST），不仅界面优雅清爽，还配备了很多非常有用的插件，可以帮助我们快速开发各种web页，并可使之标准化。

一、ST插件安装/管理

1、安装Package Control插件包管理：

安装插件之前，需先安装Package Control插件包管理组件

a.) 按 Ctrl + ` 调出console；

b.) 粘贴以下代码到底部命令行并回车：

如果是Sublime Text3，代码如下：

1

import urllib.request,os; pf = '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())

c.) 序列号：

 
           ----- BEGIN LICENSE ----- 
          
 Anthony Sansone 
          
 Single User License 
          
 EA7E-878563 
          
 28B9A648 42B99D8A F2E3E9E0 16DE076E 
          
 E218B3DC F3606379 C33C1526 E8B58964 
          
 B2CB3F63 BDF901BE D31424D2 082891B5 
          
 F7058694 55FA46D8 EFC11878 0868F093 
          
 B17CAFE7 63A78881 86B78E38 0F146238 
          
 BAE22DBB D4EC71A1 0EC2E701 C7F9C648 
          
 5CF29CA3 1CB14285 19A46991 E9A98676 
          
 14FD4777 2D8A0AB6 A444EE0D CA009B54 
          
 ------ END LICENSE ------ 
          
 ----- BEGIN LICENSE ----- 
          
 Alexey Plutalov 
          
 Single User License 
          
 EA7E-860776 
          
 3DC19CC1 134CDF23 504DC871 2DE5CE55 
          
 585DC8A6 253BB0D9 637C87A2 D8D0BA85 
          
 AAE574AD BA7D6DA9 2B9773F2 324C5DEF 
          
 17830A4E FBCF9D1D 182406E9 F883EA87 
          
 E585BBA1 2538C270 E2E857C2 194283CA 
          
 7234FF9E D0392F93 1D16E021 F1914917 
          
 63909E12 203C0169 3F08FFC8 86D06EA8 
          
 73DDAEF0 AC559F30 A6A67947 B60104C6 
          
 ------ END LICENSE ------

2、插件安装方法：

a.) 按下Command + Shift + P（Win: Ctrl + Shift + P）调出命令面板；

b.) 输入install 调出 Install Package 选项并回车，然后输入插件名关键字，在下拉列表中选中要安装的插件。

3、插件卸载/查看已安装插件：

a.) 按下Command + Shift + P（Win: Ctrl + Shift + P）调出命令面板；

b.) 输入remove 调出 Remove Package 选项并回车，然后在列表中选择/查看插件。

二、快速开发HTML

1、快速生成模板文件（安装SublimeTmpl 插件）：

SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板。

快捷键如下：

 
     
          ctrl 
          + 
          alt 
          + 
          h html 
         
 
          ctrl 
          + 
          alt 
          + 
          j javascript 
         
 
          ctrl 
          + 
          alt 
          + 
          c css 
         
 
          ctrl 
          + 
          alt 
          + 
          p php 
         
 
          ctrl 
          + 
          alt 
          + 
          r ruby 
         
 
          ctrl 
          + 
          alt 
          + 
          shift 
          + 
          p python 
         
 
   

2、快速编辑html/CSS（安装Emmet插件，原名Zen Coding）：

例如：输入ul#list>li*4>img ，按Tab键即可快速生成下面一段代码：

例如：输入link，按Tab键即可生成<link rel="stylesheet" href="">。

使用Emmet编写代码时，需要遵循一定的缩写规则：

 
          E： 
         
          元素名（div、p） 
         
          E 
          #id： 
         
          带 
          Id 
          的元素（div 
          #content、p#intro、span#error） 
         
          E. 
          class 
          ： 
         
          带 
          class 
          的的元素（div.header、p.error）, 
          id 
          和 
          class 
          可以连着写，div 
          #content.column 
         
          E>N： 
         
          子元素（div>p、div 
          #footer>p>span） 
         
          E 
          * 
          N： 
         
          多项元素（ul 
          #nav>li*5>a） 
         
          E 
          + 
          N： 
         
          多项元素 
         
          E$ 
          * 
          N： 
         
          带序号的元素

三、代码的标准化

1、编码格式标准化（安装HTML/CSS/JS Prettify插件）：

安装后，按Command + Shit + H（Win: Ctrl + Shit + H）键，即可全面优化html、CSS、JS的格式。

2、编码逻辑标准化（安装JSHint插件）：

JSHint 是一个 JavaScript 的代码质量检查工具，主要用来检查代码质量以及找出一些潜在的代码缺陷。

a.) sublime text2可直接安装此插件，然后按Command + B （Win: Crl + B） 来检查 JS 代码。

b.) sublime text3上安装稍复杂点，可见后面附文安装方法，也可直接在线检查：http://www.jshint.com

附：JSHint在ST3上的安装方法

一、安装JSHint及编辑器插件

1. 首选确认安装了Node.js。然后使用如下命令将JSHint安装为Node程序。SublimeLinter依赖的JSHint版本为2.5.0或更新。

 
          npm  
          install  
          -g jshint

JSHint安装成功后可以在终端通过命令行进行验证。

2. 安装SublimeLinter和SublimeLinter-jshint插件

使用Package Control安装SublimeLinter和SublimeLinter-jshint插件，安装步骤详见如何快速开发符合规范的web页，“ST插件安装”一节。安装完成后重启Sublime Text3。

二、使用和配置SublimeLinter

重启编辑器后应该就能看到JSHint的提示了。如果SublimeLinter声称linter可执行文件无法找到，请确保JSHint正确安装，且其路径已经被加到PATH环境变量（OS X在终端启动文件中配置，Windows则添加路径至path系统环境变量）。

上图是JSHint提示一个警告的例子，警告以黄色点在行号左侧标出，相关的变量被高亮提示，点击提示框会在状态栏显示具体信息。光标不在任何提示框时状态栏显示发现的错误和警告数量。SublimeLinter提供了右键菜单（和快捷键）在各错误间跳转，或者列出所有发现的错误。

SublimeLinter有几种监控模式（右键 > SublimeLinter > Lint Mode），分别是Background（实时监测），Load / Save，Save Only和Manual。错误/警告的提示样式也可以更改（右键 > SublimeLinter > Mark Style 和 Choose Gutter Theme）。更多的设置请参考SublimeLinter的配置文件（Sublime Text菜单项 > Perferences > Package Settings > SublimeLinter > Settings User）。

三、配置JSHint

JSHint通过.jshintrc文件配置验证规则，该文件应放置在验证目标文件的某个祖先目录中（常用做法是放置在用户HOME目录）。如果文件不存在请手工创建。一个示例.jshintrc内容如下。

 
          { 
         
          // 提示项定制 
         
          "eqeqeq" 
          :  
          false 
          ,     
          // 不提示使用 == 和 !== 的一般比较 
         
          "-W041" 
          :  
          false 
          ,      
          // 不提示使用 == 和 !== 与''或0的比较 
         
          "eqnull" 
          :  
          true 
          ,      
          // 不提示和 null 比较 
         
          "sub" 
          :  
          true 
          ,         
          // 不提示使用 [] 形式访问对象属性 
         
          // "es5": true,     // ES5里尾部逗号是合法的 
         
          "es3" 
          :  
          true 
          ,         
          // 提示尾部逗号 
         
          "bitwise" 
          :  
          true 
          ,     
          // 提示位操作符的使用（防止逻辑运算符笔误） 
         
          "curly" 
          :  
          true 
          ,       
          // 提示条件语句和循环语句的语句体没有使用大括号包裹 
         
          "immed" 
          :  
          true 
          ,       
          // 提示立即执行函数没有使用小括号包裹 
         
          "latedef" 
          :  
          "nofunc" 
          , 
          // 提示变量使用先于变量声明（但函数声明除外） 
         
          "noarg" 
          :  
          true 
          ,       
          // 提示 arguments.caller 和 arguments.callee 的使用 
         
          "undef" 
          :  
          true 
          ,       
          // 提示变量未声明就使用（跨文件全局变量请在predef中显式列出） 
         
          "unused" 
          :  
          true 
          ,      
          // 提示未使用的变量 
         
          // 环境感知 
         
          "browser" 
          :  
          true 
          ,     
          // 感知浏览器API，对应变量默认为已声明的，如 document, navigator, FileReader 
         
          "jquery" 
          :  
          true 
          ,      
          // 感知jQuery API 
         
          // "devel": true,   // 感知调试API，如console, alert等，不推荐用于正式发布 
         
          "predef" 
          : [          
          // 列出已知的全局变量，默认为已声明的 
         
          "Ext" 
          , 
         
          "XMLifeOperating" 
          , 
         
          "sendPutRequest" 
          , 
         
          "sendRequest" 
          , 
         
          "sendGetRequest" 
          , 
         
          "sendDeleteRequest" 
          , 
         
          "requestAction" 
          , 
         
          "requestException" 
          , 
         
          "uploadImage" 
          , 
         
          "uploadBlobImage" 
          , 
         
          "ConvertUtils" 
          , 
         
          "rpc" 
          , 
         
          "RpcCall" 
          , 
         
          "RpcNamespace" 
          , 
         
          "deepExtend" 
          , 
         
          "objectClone" 
         
          ] 
         
          }

SublimeLinter同时支持指定.jshintrc位置，覆盖“沿着父文件夹查找”的规则。通过在SublimeLinter的配置文件中合并如下内容达到这个目的。

 
          { 
         
          "user" 
          : { 
         
          "linters" 
          : { 
         
          "jshint" 
          : { 
         
          "@disable" 
          :  
          false 
          , 
         
          "args" 
          : [ 
         
          "--config" 
          , 
         
          "${home}/.jshintrc" 
         
          ], 
         
          "excludes" 
          : [] 
         
          } 
         
          } 
         
          } 
         
          }

 
      
           ctrl 
           + 
           alt 
           + 
           h html 
          
 
           ctrl 
           + 
           alt 
           + 
           j javascript 
          
 
           ctrl 
           + 
           alt 
           + 
           c css 
          
 
           ctrl 
           + 
           alt 
           + 
           p php 
          
 
           ctrl 
           + 
           alt 
           + 
           r ruby 
          
 
           ctrl 
           + 
           alt 
           + 
           shift 
           + 
           p python 
          
 
    