PHP & JavaScript & CSS Coding Style 探討

分別介紹 PHP & JavaScript & CSS Coding Style 工具

Transcript

1. PHP & CSS & JavaScript Coding Style Bo-Yi Wu 2016.04.21 1  
2. 關於我   http://blog.wu-boy.com/ https://github.com/appleboy https://www.facebook.com/appleboy46 2  
3. 為什麼要制定 Coding Style 3  
4. Pull Request Pull Request Pull Request Code Review 4  
5. 如果沒有制定程式語言 Style •  一份程式碼看起來就像是好幾個人寫的 •  Code Reviewer 非常辛苦 •  程式碼維護困難 •  新人加入團隊，上手時間增加 5  
6. 最終目的讓專案程式碼   看起來像是一個人寫的   6  
7. 聊聊後端 PHP Coding Style 7  
8. PHP-­‐FIG   8  
9. 請詳細閱讀並且遵守   PSR-1: Basic Coding Standard PSR-2: Coding Style Guide 9  
10. PHP  只能使用  <?php 或  <?=   10  
11. 檔案格式請務必存成 UTF-8 without BOM Unix Lf (linefeed) 11  
12. 檔案內容最後保留留一行空白 12  
13. 檔案內容最後不需要有 ?> 13  
14. Class Name 務必宣告為 “StudlyCaps” 14  
15. 5.3 之後請使用 Namespace 15  
16. 5.2.x 或更早版本請遵守底下命名   16  
17. Constant 變數必須為大寫 + 底線命名 const VERSION = '1.0'; const DATE_APPROVED = '2012-06-01'; 17  
18. Method 必須宣告為 camelCase() public function helloWorld() { } 18  
19. 縮排原則 請使用 Space 而不是 tab 請勿 space + tab 混用 19  
20. PHP 保留字請務必使用小寫 像是 true, false, null … 等 http://goo.gl/bJH8H 20  
21. if, elseif, else 21  
22. switch, case 22  
24. While, do while 注意括號及 space 位置 24  
25. <?php while ($expr) { // structure body } 25  
26. <?php do { // structure body; } while ($expr); 26  
27. for, foreach, try catch 注意括號及 space 位置 27  
28. <?php for ($i = 0; $i < 10; $i++) { // for body } 28  
29. <?php foreach ($data as $k => $v) { // foreach body } 29  
30. <?php try { // try body } catch (FirstExceptionType $e) { // catch body } catch (OtherExceptionType $e) { // catch body } 30  
31. 這麼多 Style Rule 有沒 有工具可以幫忙檢查 ? 31  
32. EditorConfig http://editorconfig.org/ 解決編輯器 config 設定 Tab vs space 32  
34. 搭配 sublime text editor https://github.com/sindresorhus/editorconfig-sublime 34  
35. PHP Coding Standards Fixer http://cs.sensiolabs.org/ The PSR-1 and PSR-2 Coding Standards fixer for your code 35  
36. 安裝方式   •  wget http://get.sensiolabs.org/php-cs- fixer.phar -O php-cs-fixer •  $ sudo chmod a+x php-cs-fixer •  $ sudo mv php-cs-fixer /usr/local/bin/php- cs-fixer 36  
37. Mac 安裝 brew install homebrew/php/php-cs-fixer 37  
39. 搭配 PHP CodeSniffer 外掛 https://github.com/benmatselby/sublime-phpcs 39  
41. Demo sublime text 41  
42. Code Review 無 style 檢查 style 檢查 style 檢查 有人會忘記裝 tool 來檢查 coding style 42  
43. The PHP Coding Style Service Because coding standards matter https://styleci.io 43  
45. Code Review 無 style 檢查 style 檢查 style 檢查 style 檢查錯誤 45  
46. Documenting your Code 務必務必寫註解或文件 http://www.phpdoc.org/docs/latest/index.html 46  
48. 新成員請先閱讀底下文件   PHP The Right Way http://www.phptherightway.com/ 48  
49. 來聊聊前端   JavaScript && CSS Coding Style 49  
50. Sass/Scss/Less CSS 預處理器 50  
51. SASS SCSS LESS Compiler CSS 51  
52. 缺陷   •  需要經過  compiler 才能變成  CSS 檔案   •  要學習  sass/scss/less 新語法   •  專案成長後，需要 compiler   時間越久   •  無法支援 css  lint 檢查語法   52  
53. postcss a tool for transforming styles with JS plugins. https://github.com/postcss/postcss 53  
54. CSS Parser Plugin 1 Plugin 2 New CSS Postcss 54  
55. 我們只需要挑專案 用到的 Plugin 即可 55  
56. Plugin •  Use Future CSS, Today – autoprefixer, postcss-cssnext •  Better CSS Readability – precss, postcss-sorting •  Images and Fonts – postcss-sprites 56  
57. Usage gulp.task('css', () => { let postcss = require('gulp-postcss'); return gulp.src('src/*.css') .pipe( postcss([ plugin1, plugin2 ]) ) .pipe( gulp.desc('build/') ); }); 57  
58. Plugin postcss.plugin('my-plugin', function () { return function (css) { doSomething(css); }; }); 58  
59. Like Sass/Less PostCSS .block { &_title { font-size: 1.2em; } } CSS .block_title { font-size: 1.2em; } 59  
60. Fallbacks PostCSS .foo { opacity: 0.8; } CSS .foo { opacity: 0.8; filter: alpha(opacity=80)\9; } 60  
61. Minify PostCSS .foo { border: none; } CSS .foo {border:0} 61  
62. Plugin for CSS lint .foo { margin-top: 10px; margin: 0 auto; } foo.css:3:5: margin overrides margin-top. 62  
63. PostCSS vs Gulp PostCSS •  Parse –  Transform –  Fallbacks –  Minify Gulp •  Parse –  Transform •  Parse –  Fallbacks •  Parse –  Minify 63  
64. 使用方式     Gulp + Less + PostCSS 64  
65. return gulp.src('src/*.less') .pipe( less() ) .pipe( postcss([]) ) .pipe( gulp.desc('build/') ); 65  
66. postcss([])   沒任何 plugin input === output 66  
67. postcss([ require('postcss-cssnext'), require('postcss-csssimple'), require('autoprefixer') ]) 67  
68. Stylelint A mighty, modern CSS linter https://github.com/stylelint/stylelint 68  
69. CSS Style Lint gulp.task('lint:css', function () { return gulp.src('src/*.less') .pipe( postcss([ require('stylelint'), require('postcss-reporter'), ], { syntax: require('postcss-less') }) ); }); 69  
70. Less Less Lint cssnext autoprefixer Minify CSS PostCSS Process 70  
71. 延伸閱讀   A mostly reasonable approach to CSS and Sass. https://github.com/airbnb/css 71  
72. 來看看 JavaScript Style 推薦 airbna/javascript   https://github.com/airbnb/javascript     72  
73. 你是寫 ES5 https://github.com/airbnb/javascript/tree/master/es5 73  
74. 寫 object // bad var item = new Object(); // good var item = {}; 74  
75. 寫 Array // bad var item = new Array(); // good var item = []; 75  
76. 使用單引號   var foo = ‘bar’ 76  
77. Properties var luke = { jedi: true, age: 28 }; // bad var isJedi = luke['jedi']; // good var isJedi = luke.jedi; 77  
78. 動態取 Properties   function getProp(prop) { return luke[prop]; } var isJedi = getProp('jedi'); 78  
79. 變數請宣告在最前面   不管是 global 或在 function 內 79  
80. Use === and !== over == and != 80  
81. 你是寫 ES6 https://github.com/airbnb/javascript 81  
82. 建議從現在開始寫 ES6 如果你想踏入 React 世界 https://babeljs.io/ Babel transforms your JavaScript 82  
83. Arrow Functions [1, 2, 3].map(function(n) { return n * 2; }, this); // -> [ 2, 4, 6 ] [1, 2, 3].map(n => n * 2); // -> [ 2, 4, 6 ] 83  
84. 不需要再寫 var self = this 84  
85. function Person() { this.age = 0; setInterval(function growUp() { this.age++; }, 1000); } var p = new Person(); 85  
86. function Person() { var self = this; self.age = 0; setInterval(function growUp() { self.age++; }, 1000); } var p = new Person(); 86  
87. function Person(){ this.age = 0; setInterval(() => { this.age++; }, 1000); } var p = new Person(); 87  
88. Block Scoping Functions var a = 5; var b = 10; if (a === 5) { let a = 4; var b = 1; console.log(a); // 4 console.log(b); // 1 } console.log(a); // 5 console.log(b); // 1 var a = 5; var b = 10; if (a === 5) { (function () { var a = 4; b = 1; console.log(a); // 4 console.log(b); // 1 })(); } console.log(a); // 5 console.log(b); // 1 88  
89. Template var user = { name: 'Caitlin Potter' }; console.log('Thanks for V8, ' + user.name + '.'); var user = {name: 'Caitlin Potter'}; console.log(`Thanks for V8, ${user.name}.`); 89  
90. Computed Property Names var prefix = 'foo'; var test= { [prefix + 'bar']: 'hello', [prefix + 'baz']: 'world' }; console.log(test['foobar']); // -> hello console.log(test['foobaz']); // -> world var prefix = 'foo'; var test= {}; test[prefix + 'bar'] = 'hello'; test[prefix + 'baz'] = 'world'; console.log(test['foobar']); // -> hello console.log(test['foobaz']); // -> world 90  
91. Destructuring Assignment function f(x, y) { if (y === undefined) { y = 12; } return x + y; } f(3) === 15; function f(x, y = 12) { return x + y; } f(3) === 15; 91  
92. Classes function Hello(name) { this.name = name; } Hello.prototype.hello = function hello() { return 'Hello ' + this.name; }; Hello.sayHelloAll = function () { return 'Hello everyone!'; }; class Hello { constructor(name) { this.name = name; } hello() { return 'Hello ' + this.name; } static sayHelloAll() { return 'Hello everyone!'; } } 92  
93. Module var math = require('lib/math'); console.log('2π = ' + math.sum(math.pi, math.pi)); import math from 'lib/math'; console.log('2π = ' + math.sum(math.pi, math.pi)); 93  
94. Property Method Assignment var object = { value: 42, toString: function toString() { return this.value; } }; var test= { value: 42, toString() { return this.value; } }; 94  
95. Rest Parameters function f(x) { var y = []; y.push.apply(y, arguments) && y.shift(); // y is an Array return x * y.length; } function f(x, ...y) { // y is an Array return x * y.length; } console.log(f(3, 'hello', true) === 6); 95  
96. Spread Operator function f(x, y, z) { return x + y + z; } f.apply(null, [1, 2, 3]) === 6; function f(x, y, z) { return x + y + z; } f(...[1,2,3]) === 6; 96  
97. ES6 讓開發者少寫很多程式碼 97  
98. ESLint The pluggable linting utility for JavaScript and JSX http://eslint.org/ 98  
99. { "extends": "airbnb" } 99  
100. babel-eslint ESLint using Babel as the parser. https://github.com/babel/babel-eslint 100  
101. .eslintrc { "parser": "babel-eslint", "rules": { "strict": 0 } } $ eslint your-files-here 101  
102. Any Question? 102