บทความ IT เจ๋งๆ

5 เครื่องมือ ที่ช่วยให้เขียน Clean Code ง่ายขึ้น

09-พ.ย.-18

คัมภีร์เทพ IT

การเขียน Code ได้ ต่างกับ การเขียน Code ที่ดี ซึ่งการเขียน Clean Code ถึงเป็นเป้าหมายสำคัญที่เหล่า Coder แทบทุกคนอยากที่จะทำให้ได้ วันนี้เรากันว่า 5 เครื่องมือ ที่ช่วยให้เขียน Clean Code ง่ายขึ้น มีอะไรบ้าง แม้บทความค่อนข้างยาว เนื่องจากมี Tutorial แนะนำว่าคุณควรทำอะไรบ้าง แต่มันจะเป็นประโยชน์กับคุณแน่นอน

1. Prettier

Prettier เป็น Code Formatter ซึ่งช่วยให้คุณสามารถจัดรูปแบบ Code ให้ดูเป็นระเบียบสวยงามยิ่งขึ้น ก่อนอื่นลองดูตัวอย่างด้านล่างก่อน
ทำไมเราถึงต้องใช้งานมัน
  • ทำการ Clean Code ที่มีอยู่
  • ใช้งานง่าย: เนื่องจากที่เป็น Open source จึงทำให้มีหลายๆ คนได้ใช้งานมันและปรับปรุงแก้จากประสบการณ์ของพวกเขา จนทำให้มันใช้งานง่าย
  • ไม่ทำให้เสียเวลา: สิ่งที่หลายคนไม่ค่อยตระหนัก คือพวกเขาใช้เวลาในการจัดรูปแบบ Code ไปโดยไม่จำเป็น แต่หากคุณปล่อยให้ Prettier จัดการกับมันจะทำให้คุณมีเวลาทำอย่าง
  • เป็นตัวช่วยสำหรับมือใหม่: หาก Developer มือใหม่ต้องทำงานร่วมกับ Engineer เก่งๆ และต้องการให้ดูเก่งในการเขียน Clean Code ขอแนะนำให้ใช้ Prettier
แล้วจะ Set up มันอย่างไร
สร้างโฟลเดอร์ที่ชื่อว่า app และภายในโฟลเดอร์นั้นให้พิมพ์ ตามคำสั่งด้านล่าง:
มันจะสร้างไฟล์ package.json ภายในโฟลเดอร์ app
ขั้นตอนต่อไป สำหรับในบทความนี้ขอใช้ yarn แต่หากคุณจะใช้ nmp ก็สามารถทำได้เช่นกัน
เรามาเริ่ม Install ตัว dependency แรกกัน:
มันจะ Install ตัว dev dependency ใน package.json ซึ่งมีลักษณะดังนี้:
ต่อไปจะพูดกันถึงว่า “prettier”: “prettier — write src/**/*.js” ทำอะไร แต่ก่อนอื่นให้สร้างโฟลเดอร์ src/ ภายในโฟลเดอร์ app ของเรา และภายในโฟลเดอร์ src/ ให้สร้างไฟล์ชื่อ index.js และในไฟล์ index.js ให้ Paste Code ตามนี้:
 
จนถึงตอนนี้เรามีไฟล์ src/app/index.js พร้อมด้วย Code บางงส่วนที่ไม่ค่อยน่าดูนัก
3 เรื่องที่เราสามารถทำได้ ในเรื่องนี้:
  • จัดรูปแบบและจัดเยื้อง/ย่อหน้าใน Code ด้วยตนเอง
  • ใช้เครื่องมืออัตโนมัติ
  • ปล่อยมันไป ไม่ต้องทำอะไร (หวังว่าคุณจะไม่เลือกหัวข้อนี้)
เชื่อว่าทางเลือกที่ 2 น่าจะดีที่สุดสำหรับคุณ ตอนนี้เรามี dependency ที่ถูก install และ Prettier script ที่ถูกเขียนใน package.json แล้ว
ต่อไป เรามาสร้างไฟล์ prettier.config.js ในโฟลเดอร์ root app และเพิ่ม Prettier rules ให้กับมัน:
printWidth จะตรวจสอบให้แน่ใจว่า Code ของคุณมีอักขระไม่เกินกว่า 100 ตัวอักษร
singleQuote จะช่วยแปลง double quotes ให้เป็น single quotes 
trailingComma จะตรวจสอบให้แน่ใจว่า มีเครื่องหมาย , ต่อท้าย Object property
bracketSpacing จะ Print Space ระหว่าง Object literals:
jsxBracketSameLine จะช่วยใส่ > ในบรรทัดสุดท้ายของ JSX element:
tabWidth จะระบุจำนวน space ต่อ Indentation level
semi ถ้าเป็น True มันจะพิมพ์ ; เมื่อสิ้นสุด Statement
นี่คือ List ของ Option ทั้งหมด ที่คุณสามารถเพิ่มให้กับ Prettier ได้
ตอนนี้เรามี Configuration Set up แล้ว เราจะมาพูดถึง Script นี้กัน:
ใน Script ด้านบน เรา Run Prettier และบอกให้มันค้นหาไฟล์ .js ทั้งหมดในโฟลเดอร์ src/ สำหรับ --write เป็นการบอก Prettier ให้ Save ไฟล์ที่จัดรูปแบบไว้ ในขณะที่แต่ละไฟล์และหาความผิดปกติในการสร้าง Code 
ลองมา Run Script กัน:
 
นี่คือสิ่งที่เกิดขึ้นกับ Code หลังจากการ Run:
หากคุณไม่เข้าใจหรือติดขัดเรื่องไหน ลองเข้าไปดูที่ Repository นี้

2. ESLint

Code Linter คืออะไร?
Code linting เป็นเครื่องมือที่ช่วยการวิเคราะห์โครงสร้างของ Code ซึ่งมักใช้เพื่อค้นหารูปแบบของปัญหาที่อาจะเกิดขึ้น หรือ Code ที่เป็นปัญหาซึ่งไม่เป็นไปตาม Style Guidelines สำหรับ Code Linter ที่น่าสนใจและพูดถึงในบทความนี้คือ ESLint ซึ่ง Linting tools ที่จะช่วยให้ Developer สามารถค้นหาปัญหาเกี่ยวกับ JavaScript Code ได้โดยไม่ต้อง Execute มัน
ทำไม ESLint ถึงมีความพิเศษ?
ทุกอย่างใน ESLint สามารถใส่เพิ่มเติมได้ คุณสามารถเพิ่ม Rules ได้ (ไม่ใส่ Rules และ Formatter เข้าไปก็ได้) และทุกๆ Linting Rule ที่คุณเพิ่มเข้าไปเป็นแบบ Stand alone สามารถเปิด-ปิดได้ และแต่ละ Rule สามารถ Set ให้แสดง Warning หรือ Error ได้ นอกจากนี้การใช้ ESLint จะทำให้คุณสามารถปรับแต่ง Style Guide ได้ตามที่คุณต้องการ โดยปัจจุบันมี 2 Style Guide ที่เป็นที่นิยมคือ Google JavaScript Style Guide และ Airbnb JavaScript Style Guide
สำหรับผู้เขียนบทความนี้(Adeel Imran) แนะนำให้ใช้ Airbnb JavaScript Style Guide เนื่องจากมันได้รับการ Maintain อยู่สม่ำเสมอ ลองดู GitHub repo ของพวกเขาดู 
เรามาเริ่ม Update ไฟล์ package.json กันเลย:
ก่อนจะไปเรื่อง Configuration เรามาพูดถึงสิ่งที่แต่ละ package ทำได้ก่อน แล้วค่อยไปคุยกันเรื่อง Configuration
babel-eslint: Package นี้ช่วยให้คุณสามารถใช้ Barbel ได้ง่ายขึ้น คุณไม่จำเป็นต้องใช้ Plugin นี้ หากคุณไม่ได้ใช้ Flow หรือ Feature ที่กำลังทดสอบอยู่ ซึ่ง ESLint ยังไม่ได้ Support 
eslint: นี่เป็นเครื่องมือหลักที่จำเป็นสำหรับการ Linting Code ของคุณ
eslint-config-airbnb: Package นี้มี ESLint Configuration ของ Airbnb ทั้งหมด ซึ่งคุณสามารถ Modify มันได้
eslint-plugin-babel: Plugin ของ Eslint ที่ทำงานร่วมกับ babel-eslint
eslint-plugin-import: Plugin นี้มีจุดประสงค์เพื่อสนับสนุน Linting ของ ES2015+ (ES6+) import/export syntax และป้องกันปัญหาเกี่ยวกับการสะกด File Paths และ Import Names ผิด อ่านเพิ่มเติมที่นี่
eslint-plugin-jsx-a11y: Linting Rules สำหรับ Accessibility Rules บน JSX elements
eslint-plugin-prettier: ช่วยให้ ESLint ทำงานได้กับ Prettier ได้อย่างราบรื่น 
eslint-plugin-react: Linting Rules ของ React สำหรับ ESLint
ใน Tutorial นี้จะไม่กล่าวถึง Unit Testing สำหรับ Jest/Enzyme มากนัก แต่ถ้าคุณกำลังใช้งานมัน ก็เพิ่ม Linting Rule ให้พวกมันด้วย:
eslint-config-maid-enzyme: ช่วยให้ตัวแปร ของ React กับ Enzyme เป็นแบบ Globalized ซึ่ง Lint Config นี้ ช่วยให้ ESLint รู้ว่าอะไรบ้างที่เป็น Globals 
eslint-plugin-jest: ESLint plugin สำหรับ Jest
husky: คุณจะรู้จักมันมากขึ้นในเรื่องของ Automation 
lint-staged: คุณจะรู้จักมันมากขึ้นในเรื่องของ Automation
ตอนนี้ คุณมีความเข้าใจพื้นฐานแล้ว เรามาเริ่มด้วยการ สร้าง .eslintrc.js file ใน root app/ folder
จากนั้นเพิ่ม .eslintignore file ลงใน root app/ directory:
ทีนี้เรามาดูกันว่า .eslintrc.js มันทำอะไรบ้าง:
  • env: Environment กำหนดตัวแปร Global ที่ถูกกำหนดไว้ล่วงหน้า Environment ที่มีอยู่ - ในกรณีนี้คือ es6, browser และ node 
  • extends: Array ของ Strings – แต่ละ Configuration ที่เพิ่มเติมเข้าไป จะช่วย Extend ตัว Configuration ก่อนหน้านี้ ตอนนี้เรากำลังใช้ Linting Rules โดย airbnb ซึ่งจะถูก Extend ไปยัง jest และจากนั้น Extend ไปยัง jest-enzyme
  • plugins: plugins เป็น Linting Rules พื้นฐานที่เราต้องการใช้ ตอนนี้เรากำลังใช้ Babel, Import, jsx-a11y, React, Prettier ซึ่งได้อธิบายไปข้างต้นแล้ว
  • parser: โดย Default แล้ว ESLint ใช้ Espree แต่เนื่องจากเราใช้ Babel จึงจำเป็นต้องใช้ Babel-ESLint
  • parserOptions: เมื่อเราเปลี่ยน default parser สำหรับ Espree ไปยัง Babel-eslint เราจำเป็นต้องระบุ parserOptions ด้วย
  • rules *: rules ทั้งหมดที่เราได้ Extend และเพิ่มเข้าไปด้วย plugins เราสามารถเปลี่ยนหรือแทนที่ได้ 
ต่อไปจะพูดถึง .eslintignore ซึ่งจะระบุรายการของ Path ที่เราไม่ต้องการให้ Lint นั่นเอง ซึ่งในที่นี้ขอยกมา 3 ตัวอย่าง
  • /.git: กรณีไม่ต้องการให้ File ที่เกี่ยวข้องกับ Git ถูก Linted
  • /.vscode: หากคุณใช้ VS code แล้วมีการ configuration เอง หากไม่ต้องการให้ configuration ของคุณถูก Linted ก็ใส่ Path นี้เข้าไป
  • node_modules: กรณีไม่ต้องการให้ Dependency ถูก Lint ก็สามารถเพิ่มสิ่งนี้ลงในรายการ 
ต่อไปจะพูดถึง Script ที่เพิ่มใหม่เข้าไปใน package.json
  • $ yarn lint : เมื่อ Run สั่งนี้ มันจะไปยัง File ทั้งหมดของคุณใน src/ และจะให้รายละเอียดการ Log in ในแต่ละ File ที่พบ Error ซึ่งคุณสามารถเข้าไปแก้ไขด้วยตนเองได้http://images.techstarthailand.com/images/blog/Article2018/CleanCodeTools/2.ESLint06.gif 
  • $ yarn lint:write : เมื่อ Run สั่งนี้ มันจะทำเช่นเดียวกับคำสั่งด้านบน แต่สิ่งที่เพิ่มเติมเข้ามา คือมันจะช่วยแก้ไข Error ใน Code ให้ถูกต้อง ซึ่งมันจำช่วยแก้ไขเท่าที่จะทำได้
หากคุณไม่เข้าใจหรือติดขัดเรื่องไหน ลองเข้าไปดูที่ Repository นี้

3. Automate Format & Lint on Save

จนถึงตอนนี้ เรามีการ Setup ตัว Prettier และ ESLint แต่ทุกครั้งที่เรา Run Script จะต้องทำสิ่งนี้:
  • จัด Format และ Lint Code โดยกด “ctrl + s” ใน Editor ของคุณ
  • ทุกครั้งที่คุณ Commit Code ให้ Execute ตัว Pre-command โดยอัตโนมัติ เพื่อ Lint และจัด Format Code ของคุณ 
ในกรณีของหัวข้อนี้ คุณอาจต้องใช้ Editor อย่าง VS Code 
  • ติดตั้ง Plugin ที่เรียกว่า ESLint extension 
คุณสามารถดาวน์โหลดได้ ที่นี่ หรือกด ctrl + shift + x ใน VS Code editor ซึ่งจะเป็นการเปิด Extensions Module มีประเภทค้นหา eslint รายชื่อ Plugins จะปรากฏขึ้นมา จากนั้นติดตั้ง Dirk Baeumer เมื่อติดตั้งแล้วให้กดปุ่ม Reload เพื่อ Restart ตัว Editor ของคุณ 
หลังจากคุณติดตั้ง Plugins แล้ว ในโฟลเดอร์ root app/ จะสร้างโฟลเดอร์ชื่อ .vscode/ (ต้องมี . ด้วย)
ภายในโฟลเดอร์สร้างไฟล์ settings.json แบบด้านล่าง:
  • editor.formatOnSave จากตัวอย่าง ที่ตั้งตรงนี้เป็น False เนื่องจากไม่อยากให้ Default Editor Configuration ของ File Format ไปเกิด Conflict กับ ESLint และ Prettier
  • eslint.autoFixOnSave จากตัวอย่าง ที่ตั้งตรงนี้เป็น True เนื่องจากต้องการติดตั้ง Plugin ให้มันทำงานทุกครั้งที่กด Save เมื่อ ESLint ถูก Config ค่ากับ Prettier Configurations แล้ว ทุกครั้งที่คุณกด Save มันจะจัด Format และ Lint Code ของคุณ
สิ่งสำคัญที่ควรทราบก็คือ เมื่อคุณ Run Script yarn lint:write แล้วมันจะทำการ Lint และปรับแต่ง Code ของคุณให้ดูดีได้เช่นกัน
ลองนึกดูว่า ถ้าคุณต้องจัดการ Code ที่มี 20,000 บรรทัด เพื่อตรวจสอบและปรับปรุง และคุณต้องมันแบบ Manual แถมเป็นปรับปรุง Code ที่คุณไม่คุ้นเคย ทีนี้ลองจินตนาการในทางตรงข้ามว่า หากคุณสามารถทำสิ่งนั้นได้โดยใช้เพียงคำสั่งเดียวล่ะ การทำแบบ Manual อาจใช้เวลา 30 วัน  ในขณะที่หากใช้วิธีอัตโนมัติ คุณจะใช้เวลาเพียงแค่ 30 วินาทีเท่านั้น ดังนั้นเมื่อติดตั้ง Script แล้ว ทุกครั้งที่กด Save ตัว Editor จะช่วยจัดการให้คุณเองโดยอัตโนมัติ

4. Husky

Husky คืออะไร? 
โดยพื้นฐานแล้ว มันจะช่วยเมื่อคุณต้องทำงานกับ Git นั่นหมายถึง คุณสามารถทำบางสิ่งบางอย่าง เมื่อคุณกำลังจะ Commit หรือเมื่อคุณกำลังจะ Push Code ไปที่ Branch 
ก่อนอื่นคุณต้องทำการ Install Husky ซะก่อน:
 
และในไฟล์ package.json ให้เพิ่ม snippet เข้าไป:

ดังนั้นทุกครั้งที่คุณ Commit หรือทำการ Push มันจะ Execute บาง Script หรือคำสั่ง เหมือนอย่างการ Run ตัว Test Cases หรือจัด Format Code  ของคุณ โดยคุณสามารถอ่านเพิ่มเติมเกี่ยวกับ Husky ได้ที่นี่

5. Lint-staged

Lint-staged คืออะไร? 
Lint-staged จะช่วยให้คุณ Run Linters บน Staged Files ดังนั้น Bad Code จึงไม่ถูกส่งไปที่ Branch 
ทำไมต้อง Lint-staged?
การ Linting ทำให้เราคิดว่ามีการ Run ก่อนที่จะ Commit Code การทำเช่นนี้คุณจะมั่นใจได้ว่าจะไม่มี Error ใดๆ ที่เกิดขึ้นใน repository แต่การ Run กระบวนการ Linting ใน Project ทั้งหมดทีเดียวส่งผลทำให้ทุกช้าลง และผลที่ออกมาก็อาจไม่ดีอย่างที่ควรจะเป็นด้วย ในท้ายที่สุดคุณเพียงต้องการ Linting ไฟล์ที่ผ่านการ Commit แล้ว
Project นี้มี Script ที่จะ Run Shell Talk ได้เสมอโดยใช้ List ของ Staged Files เป็น Argument และถูกกรองโดย glob pattern คุณสามารถอ่านเพิ่มเติมได้ที่นี่
สิ่งที่คุณต้องทำคือติดตั้ง Lint-staged:

จากนั้น เพิ่มสิ่งนี้ลงไปในในไฟล์ package.json ของคุณ:

สิ่งที่คำสั่งนี้จะทำคือ Run คำสั่ง lint:write ก่อน จากนั้นจะเพิ่มมันเข้าไปใน Staging Area มันจะ Run คำสั่งนี้สำหรับไฟล์ .js และ .jsx เท่านั้น แต่คุณสามารถแบบนี้สำหรับไฟล์อื่นได้เช่นกันถ้าคุณต้องการ

6. With Husky & Lint-staged Combined

ทุกๆ ครั้งก่อนที่จะ Commit Code มันจะ Run Script ที่เรียกว่า Lint-staged โดยจะ Run ตัว npm run lint:write ซึ่งจะ Lint และจัด Format Code ของคุณ แล้วเพิ่มมันลงใน staging area แล้วถึง Commit  
สุดท้ายแล้ว ไฟล์ package.json ของคุณควรมีลักษณะดังนี้ และนี่ก็เป็นตัวอย่างเดียวกับที่ได้แชร์ไว้ด้านบน:

นี่คือสิ่งที่คุณทำมันทุกครั้ง:

มันจะ Lint และจัด Format Code ของคุณ ตาม Rule ทั้งหมดที่ใส่ในไฟล์ .eslintrc.js ด้วยเหตุนี้คุณจึงมั่นใจได้ว่า จะไม่มี Bad Code ถูก Push เข้าไปในขั้นตอน Production 
ในสิ่งที่ Section นี้ได้สรุปไว้ ตอนนี้คุณมี Prettier, ESLint และ Husky ถูก Integrate อยู่ใน Code ของคุณ

7. EditorConfig ?

เริ่มต้นด้วยการสร้างไฟล์ .editorconfig ในโฟลเดอร์ root app/ แล้วให้วาง Code ที่อยู่ด้านล่างลงไปในไฟล์ดังกล่าว:

EditorConfig คืออะไร?
คงไม่ใช่ทุกคนที่จะใช้งาน VS Code และคุณก็ไม่ควรไปบังคับให้พวกเขาใช้ด้วย เพื่อให้ทุกคนเข้าใจและทำในสิ่งเดียวกันในเรื่องของสิ่งที่เป็น Defaults เช่น tab space หรือตัวสิ้นสุดบรรทัดที่ควรจะเป็น เราใช้ .editorconfig เพื่อทุกอย่างยังอยู่ใน Rule ที่ตั้งไว้
นี่คือ List ของ Editor ทั้งหมดที่ Support EditorConfig ซึ่ง Editor เหล่านี้มีทั้ง Web storm, App code, Atom, eclipse, emacs, bbedit และอื่นๆ 
การ Configuration ตาม List ด้านบน จะทำตามนี้:

  • ตัดช่องว่างด้านท้าย จากไฟล์ .md & .js
  • ตั้งค่ารูปแบบการเยื้อง (Indent Style) ด้วย Space แทนการใช้ Tab
  • ขนาดการเยื้องเป็น 2
  • เพื่อให้สิ้นสุดบรรของทุกคนเหมือนกัน (โดยไม่คำนุงถึง OS) ให้ลองอ่านเพิ่มเติม ที่นี่
  • ควรมีบรรทัดใหม่เมื่อสิ้นสุดไฟล์
  • ความยาวสูงสุดของแต่ละบรรทัดไม่ควรเกิน 100 อักขระ

เชื่อว่าบทความนี้ น่าจะเป็นประโยชน์ให้คุณนำไปประยุกต์ใช้ได้ในงานของคุณนะครับ

ที่มา:  https://medium.freecodecamp.org/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความที่เกี่ยวข้อง

ประเภทบทความ