我用云企信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"http://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",
}
}
