我用云企信emsweb项目简单试验了下在sublime3中使用代码风格检查工具及公司代码规范，简单整理使用经验分享给大家，大家一起补充完善～
CSS代码检查
安装Nodejs 模块：安装 postcss、stylelint
安装 Sublime Text扩展：使用 Package Control 依次安装 SublimeLinter、SublimeLinter-contrib-stylelint
-
复制css代码检查配置文件 ./ stylelintrc 至项目根目录下
图一 -
项目添加到工作区，打开目录中css/scss 文件，默认自动开始代码检查并显示结果，如图：红色为error 黄色为warning。
检查结果 -
我们还可以设置检查方式和结果展示效果，设置位置如图：
设置位置 修改前我们可以先借助 HTML-CSS-JS Prettify 进行代码格式化
-
点击有标记的代码行，下方会有错误描述，根据描述修改代码。
错误描述
使用 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代码检查
- 安装 Sublime Text扩展：再使用 Package Control 安装 SublimeLinter-contrib-eslint
- 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 安装
- 项目根目录下创建 .eslintrc文件并复制 codestyle-v2.0-alpha/config/ 文件夹下对应的规则文件内容。
- 仔细阅读文件内容部署，并根据项目实际情况修改文件上部分内容。
- 根据项目实际情况修改环境等信息
- 有些插件的全局变量找不到，在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,
},
- 打开目录中js文件，默认自动开始代码检查，提示及查看方法同CSS
- 借助 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",
}
}
