Front end-select development tools

development tools

Web front-end development, currently two mainstream tools:

• Webstorm
• Vscode

Webstorm is a front-end integrated development tool (IDE). The research and development company is jetbrains. It provides a community version (free) and a commercial version (paid). For introductory development, the community version is basically sufficient. The advantage is that the integration of the Webstorm environment is relatively complete, and the functions are relatively easy to use.

download address

VsCode

If you are pursuing customization, Vscode is your first choice. It is Microsoft's free and open source code editor, with a more complete plug-in ecosystem.

download address

About VsCode theme

I personally like to use theme. Generally speaking, cool black is the preferred theme for programming, but for me, black looks uncomfortable for a long time, so I usually choose brighter and warmer themes.

Subject address https://github.com/altercation/solarized

Basic plugin

The plugin ecology of Vscode is indeed rich. Here are some of the plugins I commonly use:

Vscode Chinese finished package

Auto use Close Tag closed automatically label.

Auto Rename Tag tail closed tag is modified synchronously.

Bracket Pair Colorizer Use different colors to highlight matching brackets.

Highlight Matching Tag Highlight the selected tag.

Vscode-icons VSCode file icons.

Code Spell Checker word spell checker.

Improt Cost Import package size display.

GitLens View Git information.

Color Info color view.

CSS Peek tips.

Prettier-Code formatter code formatting.

basic settings

Open the vscode settings interface:

• On Windows/Linux- file > preferences > settings
• On macOS- code > preferences > settings

Set the effective range, priority order Folder>Workspace>User

• user -global application, all items are effective.
• Work area -The designated work area takes effect.
• Folder -The specified folder takes effect.

vscode also supports direct editing of configuration files, Ctrl+Shift+P (⇧⌘P) to open the command panel, enter 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 and Eslint are used in the project

Before the project is developed, we will formulate some code specifications, use Eslint to check the code, and Prettier guarantees the consistency of the format.

Install Eslint:

npm install eslint --save-dev

Create a new .eslintrc.js file, the following is my configuration:

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",
  },
};

Install Prettier:

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

Create a new .prettierrc.js file, the following is my configuration:

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']
}

summary

This article introduces some of the plugins and basic configurations that I use commonly used in vscode. Welcome to leave a message.