來聊聊 PHP & JavaScript & CSS Coding style 讓專案看起來像是一個人寫的

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

23. 23

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

33. 33

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

38. 38

39. 搭配 PHP CodeSniffer 外掛
https://github.com/benmatselby/sublime-phpcs
39

40. 40

41. Demo sublime text
41

42. Code Review
無 style 檢
查
style 檢查
style 檢查
有人會忘記裝 tool 來檢查 coding style42

43. The PHP Coding Style Service
Because coding standards matter
https://styleci.io
43

44. 44

45. Code Review
無 style 檢
查
style 檢查
style 檢查
style 檢查錯誤
45

46. Documenting your Code
務必務必寫註解或文件
http://www.phpdoc.org/docs/latest/index.html
46

47. 47

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