前端开发环境配置

Step 1 - VS code

• 汉化插件: chinese simplied language
• 格式化代码：Prettier

// 修改settings.json
{
  "diffEditor.ignoreTrimWhitespace": true,
  "editor.suggestSelection": "first",
  // "eslint.codeActionsOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "terminal.integrated.rendererType": "dom",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "window.zoomLevel": 1,
  "workbench.colorTheme": "Visual Studio Dark",
  "workbench.iconTheme": "material-icon-theme",
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[javascript]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "files.exclude": {
    "**/.classpath": true,
    "**/.project": true,
    "**/.settings": true,
    "**/.factorypath": true
  },
  "files.associations": {
    "*.py": "python"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "powermode.enabled": true,
  "powermode.presets": "flames",
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "typescript.updateImportsOnFileMove.enabled": "always",
  //   "editor.codeActionsOnSave": {
  //     "source.fixAll.eslint": true
  //   },
  "editor.formatOnSave": true
}


// 配置文件, prettier.config.js or .prettierrc.js
module.exports = {
  // 一行最多 100 字符
  printWidth: 100,
  // 使用 4 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾不需要逗号
  trailingComma: 'none',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // parser: "babylon",
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // 换行符使用 lf
  endOfLine: 'lf'
};

• 代码检查: ESLint

  // 配置文件 .eslintrc.json
  {
    "extends": "react-app"
  }
  
  // 忽略文件 .eslintignore

• 括号高亮: Bracket Pair Colorizer

Step 2 - yarn

Facebook开发的yarn, 类似JAVA的maven管理工具，比npm更好一点：

# 安装yarn 
npm i -g yarn
# 安装项目所有依赖
yarn