提升开发幸福度-IDE配置

插件

vscode 插件

• Settings Sync
• Atom One Dark Theme
• Bracket Pair Colorizer
• Code Runner
• Dracular Official
• Easy Sass
• EsLint
• Import Cost
• LeetCode
• Live Server
• Markdown All in One
• Markdown Image
• Mardown Preview Enhanced
• Material Icon Theme
• Matlab Extension Pack
• Nginx Configuration
• nginx-formatter
• Prettier
• Project Manager
• Python Extension Pack
• Quokka.js
• Sass
• SFTP
• Simple React Snippets
• TSLint
• SVG
• Vetur
• vscode-icons
• vscode-reveal
• vue 2 snippest
• writeCnblog
• xml Tools

JB 插件（IDEA，Webstorm）

由于 JB 公司的软件开箱即用，所需插件并不多

• VSCode Keymap
• Visual Studio Code Dark Plus Theme
• Atom Material Icons
• Atom Onedark Theme
• Path hide
• Rainbow Brackets
• Grep Console
• Translation
• Statistic
• RegexpTester
• RoboPOJOGenerator
• Nyan Progress Bar

java 专用

• Alibaba Cloud Tookit
• Free MyBatis plugin
• Jpa support
• Lombok

前端专用

• .ignore
• BashSupport
• Import Cost
• InteliVue
• React snippest

chrome 插件

• Astar（安装其他插件的基础）
• Adblock Plus（再 Adblock 的基础上，可以通过 CSS 规则禁用页面元素）
• Atom File Icon web（美化 Github 的文件图标，就像在编辑器中一样）
• Octotree（美化 Github 的资源管理器）
• EditThisCookie
• FeHelper
• HTTPStatus
• Infinity
• Selenium IDE（web 自动化，爬虫用）
• Volume Magnifier
• Tampermonkey
  • AC 重定向
• Vue
• Set Character Encoding
• WhatRuns

VScode 设置

缩进设置
首先修改 vscode 的用户区设置文件。

{
  "editor.detectIndentation": false,
  "editor.tabSize": 2
}

插件也是如此

{
  "prettier.tabWidth": 2,
  "vetur.format.options.tabSize": 2
}

代码片段

• abc的提示有时会在snippet的前面，此时需要修改editor.snippetSuggestions为top
• 虽然我们可以自定义代码片段，但是vscode也有内置的代码片段，但是这些内置的代码片段有时不符合我们的要求。为了重用这些代码片段，我们需要修改vscode安装目录~\Microsoft VS Code\resources\app\extensions\javascript\snippets下的snippets（文件内容如下，我们可以将行末的分号删除）。其他语言也是如此。

{
  "define module": {
    "prefix": "define",
    "body": ["define([", "\t'require',", "\t'${1:dependency}'", "], function(require, ${2:factory}) {", "\t'use strict';", "\t$0", "});"],
    "description": "define module"
  },
  "For Loop": {
    "prefix": "for",
    "body": [
      "for (let ${1:index} = 0; ${1:index} < ${2:array}.length; ${1:index}++) {",
      "\tconst ${3:element} = ${2:array}[${1:index}];",
      "\t$0",
      "}"
    ],
    "description": "For Loop"
  },
  "For-Each Loop": { "prefix": "foreach", "body": ["${1:array}.forEach(${2:element} => {", "\t$0", "});"], "description": "For-Each Loop" },
  "For-In Loop": {
    "prefix": "forin",
    "body": [
      "for (const ${1:key} in ${2:object}) {",
      "\tif (${2:object}.hasOwnProperty(${1:key})) {",
      "\t\tconst ${3:element} = ${2:object}[${1:key}];",
      "\t\t$0",
      "\t}",
      "}"
    ],
    "description": "For-In Loop"
  },
  "For-Of Loop": { "prefix": "forof", "body": ["for (const ${1:iterator} of ${2:object}) {", "\t$0", "}"], "description": "For-Of Loop" },
  "Function Statement": { "prefix": "function", "body": ["function ${1:name}(${2:params}) {", "\t$0", "}"], "description": "Function Statement" },
  "If Statement": { "prefix": "if", "body": ["if (${1:condition}) {", "\t$0", "}"], "description": "If Statement" },
  "If-Else Statement": { "prefix": "ifelse", "body": ["if (${1:condition}) {", "\t$0", "} else {", "\t", "}"], "description": "If-Else Statement" },
  "New Statement": { "prefix": "new", "body": ["const ${1:name} = new ${2:type}(${3:arguments});$0"], "description": "New Statement" },
  "Switch Statement": {
    "prefix": "switch",
    "body": ["switch (${1:key}) {", "\tcase ${2:value}:", "\t\t$0", "\t\tbreak;", "", "\tdefault:", "\t\tbreak;", "}"],
    "description": "Switch Statement"
  },
  "While Statement": { "prefix": "while", "body": ["while (${1:condition}) {", "\t$0", "}"], "description": "While Statement" },
  "Do-While Statement": { "prefix": "dowhile", "body": ["do {", "\t$0", "} while (${1:condition});"], "description": "Do-While Statement" },
  "Try-Catch Statement": {
    "prefix": "trycatch",
    "body": ["try {", "\t$0", "} catch (${1:error}) {", "\t", "}"],
    "description": "Try-Catch Statement"
  },
  "Set Timeout Function": {
    "prefix": "settimeout",
    "body": ["setTimeout(() => {", "\t$0", "}, ${1:timeout});"],
    "description": "Set Timeout Function"
  },
  "Set Interval Function": {
    "prefix": "setinterval",
    "body": ["setInterval(() => {", "\t$0", "}, ${1:interval});"],
    "description": "Set Interval Function"
  },
  "Import external module.": {
    "prefix": "import statement",
    "body": ["import { $0 } from \"${1:module}\";"],
    "description": "Import external module."
  },
  "Region Start": { "prefix": "#region", "body": ["//#region $0"], "description": "Folding Region Start" },
  "Region End": { "prefix": "#endregion", "body": ["//#endregion"], "description": "Folding Region End" },
  "Log to the console": { "prefix": "log", "body": ["console.log($1);"], "description": "Log to the console" },
  "Log warning to console": { "prefix": "warn", "body": ["console.warn($1);"], "description": "Log warning to the console" },
  "Log error to console": { "prefix": "error", "body": ["console.error($1);"], "description": "Log error to the console" }
}

webstorm 设置

webstorm 的功能过于强大，默认开启了很多功能，对低性能电脑不是很友好，可关闭部分功能

• Typo 关闭拼写提示