Linters 程式碼檢查工具

習題預習

User ask:
給我5題Linters的中文問題

ChatGPT answer:
  1. Linter是什麼? 他是用來做什麼的?
  2. Linter的主要功能是什麼?它可以解決什麼問題?
  3. 常見的Linter有哪些?你覺得哪個Linter最適合你的項目?
  4. 如何配置一個Linter?有哪些設定可以調整?
  5. Linter有哪些限制和缺點?怎樣才能在使用Linters時得到最佳效果?

說明知識

User ask:
以中文說明Linters並舉例

ChatGPT answer:

Linters是一種以自動化方式檢查程式碼,找出可能存在的問題和潛在錯誤的工具。 它們被用於各種程式設計語言,包括JavaScript,CSS,HTML等等。 Linters可以增加代碼品質,減少bug的數量,並且可以幫助開發者維持統一的程式碼風格。 Linters也可以用來檢查代碼保持符合特定標準。以下為一些著名的Linters:

  1. ESLint:ESLint是一個用於JavaScript和Vue.js的靜態程式分析工具。 它提供了許多內建規則,使得開發者可以定義自己的規則並在代碼中執行。

  2. Prettier:Prettier是一個自動格式化程式碼的工具,支持JavaScript,HTML,CSS等語言。 非常流行的線上代碼編輯器,如VS Code等都支持Prettier。

  3. Stylelint:Stylelint是CSS,SCSS和LESS等CSS先進的Linting工具。

  4. HTMLHint:HTMLHint是一個HTML代碼檢查工具。 它可以檢查HTML的標記是否符合標準,字串是否為有效URI,標籤是否正確,Class或ID是否正確等等。

  5. JSLint:JSLint是JavaScript Linters的先驅之一。 JSLint能夠檢查代碼的集成,可以檢測出一個應用有問題的地方,而我們可能不會注意到。

彙總重點

User ask:
以中文條列Linters的重點

ChatGPT answer:
  1. 檢查語法錯誤: Linter可幫助開發者發現程式碼中的語法錯誤,並提示開發者進行修改。

  2. 樣式風格檢查: Linter可檢查代碼是否符合預定的樣式規範,例如代碼縮排、配置文件設置格式等。

  3. 代碼複雜度檢查: Linter 可以根據代碼行數、內部變量、循環次數等來檢測代碼複雜度,以幫助開發者改進。

  4. 代碼質量檢查: Linter 可以通過檢查代碼是否包含重複的內容、未使用的變量、未被測試的代碼等提出提高代碼質量的指導。

  5. 安全隱患檢查: Linter 可以檢查代碼中存在的潛在安全漏洞,例如SQL注入和跨站腳本攻擊等。

  6. 支持多種編程語言: Linter 可以支持多種編程語言,如Python、Java、JavaScript、C/C++。

知識測驗

User ask:
以中文給我5題Linters的中等難度問題,並在後面列出答案

ChatGPT answer:
  1. 有一個陣列,裡面的元素都是字串。請寫一個 Linter 函數,確認每一個字串都是以 “https://” 或 “http://” 開始。

答案:

function checkProtocol(arr) {
  const regex = /^https?:\/\//;

  return arr.every(str => regex.test(str));
}

console.log(checkProtocol(['https://example.com', 'http://www.google.com'])); // true
console.log(checkProtocol(['ftp://example.com', 'http://www.google.com'])); // false
  1. 有一個物件,裡面有幾個屬性。請寫一個 Linter 函數,確認每個屬性的值都是字串或數字型態。

答案:

function checkType(obj) {
  const values = Object.values(obj);
  const regex = /^([0-9]+|\d+\.\d+|[a-z]+)$/i;

  return values.every(val => typeof val === 'string' || typeof val === 'number' && regex.test(val));
}

console.log(checkType({ name: 'John', age: 35, city: 'New York' })); // true
console.log(checkType({ name: 'John', age: true, city: 'New York' })); // false
  1. 有一個陣列,裡面的元素都是字串。請寫一個 Linter 函數,確認每一個字串的長度都在 5 到 10 個字元之間。

答案:

function checkLength(arr) {
  return arr.every(str => str.length >= 5 && str.length <= 10);
}

console.log(checkLength(['apple', 'banana', 'peach'])); // true
console.log(checkLength(['apple', 'cherry', 'peach', 'strawberry'])); // false
  1. 有一個陣列,裡面的元素都是物件。請寫一個 Linter 函數,確認每個物件都有 “name” 和 “age” 兩個屬性。

答案:

function checkObjectProps(arr) {
  return arr.every(obj => obj.hasOwnProperty('name') && obj.hasOwnProperty('age'));
}

console.log(checkObjectProps([
  { name: 'John', age: 35 },
  { name: 'Mary', age: 28 },
])); // true

console.log(checkObjectProps([
  { name: 'John', city: 'Taipei' },
  { age: 28 },
])); // false
  1. 有一個陣列,裡面的元素都是數字。請寫一個 Linter 函數,確認每個數字都是 2 的冪次方。

答案:

function checkPowerOfTwo(arr) {
  const log2 = n => Math.log(n) / Math.log(2);
  return arr.every(num => Number.isInteger(log2(num)));
}

console.log(checkPowerOfTwo([2, 4, 8, 16])); // true
console.log(checkPowerOfTwo([1, 3, 5, 10])); // false