前端-選擇開發工具

程式設計碼農發表於2021-10-13
前端

開發工具

Web前端開發，目前兩款主流工具：

  • Webstorm
  • Vscode

Webstorm是一款針對前端的整合開發工具（IDE），研發公司是jetbrains，它提供社群版（免費）和商業版（付費），對於入門開發，社群版基本夠用。優點是Webstorm環境整合比較完善，功能使用比較容易上手。

下載地址

VsCode

如果是追求定製化那麼Vscode是你的首選，它是微軟免費的開原始碼編輯器，有外掛生態比較完善。

下載地址

關於VsCode主題

我個人喜歡使用solarized主題。一般來說酷黑是程式設計的首選主題，不過對於我來說，黑色看久了眼睛難受，所以我一般選擇亮色偏暖的主題。

主題地址 https://github.com/altercatio...

基本外掛

Vscode的外掛生態的確豐富，下面是我常用的一些外掛：

Vscode中文漢化包

Auto Close Tag 自動閉合標籤 。

Auto Rename Tag 尾部閉合標籤同步修改。

Bracket Pair Colorizer 用不同顏色高亮顯示匹配的括號。

Highlight Matching Tag 高亮選擇的標籤。

Vscode-icons VSCode 檔案圖示。

Code Spell Checker 單詞拼寫檢查。

Improt Cost 匯入包大小顯示。

GitLens 檢視Git資訊。

Color Info 顏色檢視。

CSS Peek 提示。

Prettier - Code formatter 程式碼格式化。

基本設定

開啟vscode設定介面：

  • 在 Windows/Linux 上 -檔案>首選項>設定
  • 在 macOS 上 -程式碼>首選項>設定

設定生效範圍，優先順序 資料夾 > 工作區 > 使用者

  • 使用者- 全域性應用，所有專案都生效。
  • 工作區- 指定工作區生效。
  • 資料夾- 指定資料夾生效。

vscode也支援直接編輯配置檔案，Ctrl+Shift+P (⇧⌘P) 開啟命令皮膚，輸入 Open Settings。

{
  "editor.fontFamily": "'SourceCodePro-regular', 'monospace'",
  "editor.fontSize": 15, // 字型大小
  "editor.fontWeight": "300",
  "editor.tabCompletion": "on",
  "editor.formatOnSave": true,
  "editor.wordWrap": "on", // 程式碼根據編輯器視窗大小自動折行
  "files.autoSave": "onFocusChange" // 編輯器失去焦點時自動儲存更新後的檔案
}

專案中使用Prettier和Eslint

專案開發前，我們會制定一些程式碼的規範，使用Eslint來進行程式碼檢查，Prettier保證格式的一致性。

安裝Eslint:

npm install eslint --save-dev

新建.eslintrc.js檔案，下面是我的配置：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: 'babel-eslint',
    sourceType: "module",
  },
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error",
  },
};

安裝Prettier:

npm install --save-dev --save-exact prettier

新建.prettierrc.js檔案，下面是我的配置：

module.exports = {
    // 一行最多 200 字元
    printWidth: 200,
    // 使用 2 個空格縮排
    tabWidth: 4,
    // 不使用縮排符，而使用空格
    useTabs: false,
    // 行尾不需要分號
    semi: false,
    // 使用單引號
    singleQuote: true,
    // 物件的 key 僅在必要時用引號
    quoteProps: 'as-needed',
    // jsx 不使用單引號，而使用雙引號
    jsxSingleQuote: false,
    // 末尾不需要逗號
    trailingComma: 'none',
    // 大括號內的首尾需要空格
    bracketSpacing: true,
    // jsx 標籤的反尖括號不需要換行
    jsxBracketSameLine: true,
    // 箭頭函式，只有一個引數的時候，也需要括號
    arrowParens: 'always',
    // 每個檔案格式化的範圍是檔案的全部內容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要寫檔案開頭的 @prettier
    requirePragma: false,
    // 不需要自動在檔案開頭插入 @prettier
    insertPragma: false,
    // 使用預設的折行標準
    proseWrap: 'preserve',
    // 根據顯示樣式決定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    endOfLine: 'lf',
    extends: ['plugin:prettier/recommended', 'prettier/flowtype', 'prettier/vue']
}

小結

本文介紹了我使用vscode中常用的一些外掛和基礎配置，歡迎留言交流。

相關文章