Windows系統零開始前端開發環境配置 - samwu－IT工程師數位筆記本

文章出處

1. 安裝nodejs

國內下載頁面（推薦）
官網下載頁面
現在的nodejs自帶NPM，只需點擊下一步下一步安裝即可。
為了加速國內NPM包下載，可配置淘寶NPM鏡像

2. 安裝git

國內下載頁面（推薦）
官網下載頁面
國內直接從官網下載比較困難，需要FQ。
所以這里要感謝淘寶NPM鏡像提供空間。

3. 安裝VSCode和常用插件

官網下載頁面
下面是常用的插件列表:
Git History
Git Lens
Babel ES6/ES7
ESLint
EditorConfig for Visual Studio Code
以上插件用于優化編輯器里進行git管理，代碼規范化的體驗。

4. 優化VSCode編輯器默認行為

在項目目錄下新建.editorconfig文件。
包括統一tab的占位，保存文件時最后一行再插入新行，去除首尾空格。

# 配置文件內容
# editorconfig.org

root = true


[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true


[*.md]
trim_trailing_whitespace = false

5. 配置VSCode編輯器代碼規范

安裝airbnb的規范
npm install -g eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint

在項目目錄下新建.eslintrc文件

{ "extends": "airbnb", "parser": "babel-eslint", "env": { "browser": true, "node": true, "mocha": true }, "globals": { "Babel": true, "React": true }, "plugins": [
"react"
], "rules": { "global-require": "off", "import/no-unresolved": "off", "no-underscore-dangle": "off", "no-new-func": "off", "no-param-reassign": "off", "react/prefer-stateless-function": "off", "react/no-multi-comp": "off", "react/jsx-no-bind": "off", "react/jsx-indent": "off", "react/jsx-first-prop-new-line": "off", "react/jsx-filename-extension": "off", "no-restricted-syntax": "off" }}

不是所有文件都需要eslint來校驗格式
http://eslint.org/docs/user-guide/configuring
.eslintignore
```
**/dist/**
**/src/**
**/examples/**
**/node_modules/**
**/server.js
**/webpack.config*.js
```