前端开发中代码风格工具指南

我用云企信emsweb项目简单试验了下在sublime3中使用代码风格检查工具及公司代码规范，简单整理使用经验分享给大家，大家一起补充完善～

CSS代码检查

1. 安装Nodejs 模块：安装 postcss、stylelint

2. 安装 Sublime Text扩展：使用 Package Control 依次安装 SublimeLinter、SublimeLinter-contrib-stylelint

3. 复制css代码检查配置文件 ./ stylelintrc 至项目根目录下

   
   
   图一

4. 项目添加到工作区，打开目录中css/scss 文件，默认自动开始代码检查并显示结果，如图：红色为error 黄色为warning。

   
   
   检查结果

5. 我们还可以设置检查方式和结果展示效果，设置位置如图：

   
   
   设置位置

6. 修改前我们可以先借助 HTML-CSS-JS Prettify 进行代码格式化

7. 点击有标记的代码行，下方会有错误描述，根据描述修改代码。

   
   
   错误描述

使用 HTML-CSS-JS Prettify 进行代码格式化。

• 安装 Sublime Text 扩展：使用 Package Control 安装 HTML-CSS-JS Prettify。
• 格式化当前文件，可以通过工具栏点击Prettify Code或使用快捷键（推荐） Ctrl+Shift+H (or Cmd+Shift+H for Mac).

• 可以设置自动格式化代码时间（打开／保存／... )，设置位置如图

  
  
  设置位置

• 点击上图中 Prettify Preferences -Default/User 可修改格式配置。

JS代码检查

1. 安装 Sublime Text扩展：再使用 Package Control 安装 SublimeLinter-contrib-eslint
2. package.json 文件中根据项目框架添加代码检查所需工具

"babel-eslint": "^7.2.3",
"eslint": "^4.9.0",
"eslint-plugin-angular": "^3.1.1",
"eslint-plugin-react": "^7.4.0",

或者通过命令行 npm install XXXX --save-dev 安装

3. 项目根目录下创建 .eslintrc文件并复制 codestyle-v2.0-alpha/config/ 文件夹下对应的规则文件内容。
4. 仔细阅读文件内容部署，并根据项目实际情况修改文件上部分内容。

• 根据项目实际情况修改环境等信息
• 有些插件的全局变量找不到，在globals 中添加变量

 "extends": "eslint:recommended", // eslint推荐规范，避免代码错误和潜在风险
    // "parser": "babel-eslint",//指定ESLint 解析器，默认使用Espree npm install babel-eslint --save-dev
    "plugins": [ //ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。
        "angular"//eslint-plugin-angular插件,npm install eslint-plugin-angular --save-dev
    ],
    "parserOptions": {
        "ecmaVersion": 5, //设置为 3， 5 (默认)， 6、7 或 8 指定你想要使用的 ECMAScript 版本。你也可以指定为 2015（同 6），2016（同 7），或 2017（同 8）使用年份命名
        "sourceType":"script", //设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
        "ecmaFeatures": { //这是个对象，表示你想使用的额外的语言特性
            "globalReturn":true, //允许在全局作用域下使用 return 语句
            "impliedStrict":true //启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
        }
     },
    "env": {  //指定环境,browser、node、commonjs、shared-node-browser……
        "es6": false, // 支持es6全局变量
        "browser": true, // browser 全局变量。
        "node": true //Node.js 全局变量和 Node.js 作用域。
    },
    //+++++开发人员根据项目自定义+++++++
    "globals": { //使用 globals 指出你要使用的全局变量
        "angular": false, //允许变量被重写
        "$": false, //不允许被重写
        "CryptoJS": false,
        "$rootScope":false,
        "_":false,
        "AMap":false,
        "AMapUI":false,
        "poiPickerReady":false,
    },

5. 打开目录中js文件，默认自动开始代码检查，提示及查看方法同CSS
6. 借助 HTML-CSS-JS Prettify 进行代码格式化时发现需要修改两个配置

{
    "js":
    {
        // Should the space before an anonymous function's parens be added, "function()" vs "function ()"  
        "space_after_anon_function": true,
        // [before-newline|after-newline|preserve-newline] Set operator position
        "operator_position": "after-newline",
    }
}

补充资料

HTML-CSS-JS Prettify 文档
eslint 文档