公司内 vscode 统一配置规范

# vscode 前端开发插件整理

# 功能增强

  • Auto Close Tag 自动闭合 HTML 标签
  • Auto Rename Tag (存在匹配混乱的问题,修复前不推荐安装) 自动修改 HTML 结束标签的名称
  • Live Server 在当前文件夹启动一个轻量 HTTP 服务
  • Path Intellisense 路径智能补全
  • Format Files 批量格式化
  • GitLens 强化的 Git 支持
  • HTML CSS Support 强化的 HTML/CSS 支持
  • Material Icon Theme 文件图标美化
  • REST Client 代替 Postman 的好东西
  • Runner 直接运行代码的好东西
  • SVG SVG 支持
  • Todo Tree 配合 TODO 使用,排期备忘神器
  • XML XML 支持
  • NPM NPM 支持
  • NPM Intellisense NPM 智能提示
  • Log File Highlighter 日志文件高亮

# 代码质量

  • Code Spell Checker 英文单词拼写检查「重要」
  • ESLint 代码质量检查「重要」
  • Prettier - Code formatter 代码格式化工具
  • EditorConfig for VS Code 编辑器格式配置统一化

# Vue 开发

  • Vetur Vue 语法高亮和提示
  • Vue Jump to Tag 可以在<template>, <script>, <style>之间灵活跳转。
  • Vue Peek import 定义跳转支持
  • Vue VSCode Snippets 常用代码片段

# 微信小程序开发

  • minapp 微信小程序语法补全

# vscode 配置

# .vscode/settings.json

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vetur.format.defaultFormatter.html": "prettier",
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.wordWrapColumn": 120,
  "prettier.printWidth": 120,
  "prettier.singleQuote": false,
  "prettier.tabWidth": 2,
  "prettier.endOfLine": "lf",
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}",
    "~": "${workspaceRoot}"
  },
  "cSpell.enabled": true,
  "cSpell.ignoreRegExpList": ["string"],
  "cSpell.enableFiletypes": ["vue"],
  "cSpell.words": ["mixins"]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# .prettierrc

{
  "trailingComma": "all",
  "tabWidth": 2,
  "printWidth": 120,
  "singleQuote": false,
  "endOfLine": "lf"
}
1
2
3
4
5
6
7

# .gitattributes(阻止不同系统上 git 的 eol 转换)

*.vue text eol=lf
*.js text eol=lf
*.jsx text eol=lf
*.ts text eol=lf
*.tsx text eol=lf
*.css text eol=lf
*.less text eol=lf
*.scss text eol=lf
*.styl text eol=lf
*.json text eol=lf
*.yml text eol=lf
*.xml text eol=lf
*.svg text eol=lf
1
2
3
4
5
6
7
8
9
10
11
12
13

# 配置支持别名跳转

根目录创建 jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["./*"],
      "~/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".nuxt", "dist", "static"]
}
1
2
3
4
5
6
7
8
9
10

# ESLint 规则配置

# vue 配合 prettier

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  plugins: ["vue"],
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": "warn",
    "no-debugger": "warn",
  },
  parserOptions: {
    parser: "babel-eslint",
    ecmaVersion: 2017,
    sourceType: "module",
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

需要的依赖(注意版本):

{
  "devDependencies": {
    "@vue/eslint-config-prettier": "^4.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "eslint-plugin-prettier": "^3.0.1",
    "prettier": "^1.16.4"
  }
}
1
2
3
4
5
6
7
8
9
10

# nuxt 配合 prettier

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: "babel-eslint",
  },
  extends: [
    "@nuxtjs",
    "prettier",
    "prettier/vue",
    "plugin:prettier/recommended",
    "plugin:nuxt/recommended",
  ],
  plugins: ["prettier"],
  // add your custom rules here
  rules: {
    "no-lonely-if": "off",
    "new-cap": "off",
    "vue/attributes-order": "off",
    "vue/order-in-components": "off",
    "vue/no-use-v-if-with-v-for": "off",
    "no-console": "off",
    "linebreak-style": "off",
    "vue/component-name-in-template-casing": [
      "error",
      "kebab-case",
      {
        registeredComponentsOnly: false,
        ignores: [],
      },
    ],
    "vue/name-property-casing": ["error", "PascalCase"],
    "vue/prop-name-casing": ["error", "camelCase"],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{
  "devDependencies": {
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-module": "^1.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-html-reporter": "^0.7.4",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-prettier": "^3.0.1",
    "prettier": "^1.16.4"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .eslintignore . -f node_modules/eslint-html-reporter/reporter.js -o report.html",
    "lint-fix": "eslint --fix --ext .js,.vue  --ignore-path .eslintignore ."
  }
}
1
2
3
4
5
6
7
8
9
10

# node 配合 prettier

.eslintrc.js

module.exports = {
  root: true,
  parser: "babel-eslint",
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  env: {
    node: true,
  },
  extends: "plugin:prettier/recommended",
  plugins: ["prettier"],
  // add your custom rules here
  rules: {
    "prettier/prettier": "error",
    "no-console": "warn",
    "no-unused-vars": "warn",
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

需要的依赖:

{
  "devDependencies": {
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-promise": "^4.1.1",
    "prettier": "^1.16.4"
  }
}
1
2
3
4
5
6
7
8
9
10
11

# Java Maven 配置

{
  "java.configuration.maven.userSettings": "/Users/wolfx/Applications/apache-maven-3.6.3/conf/settings.xml",
  "maven.executable.path": "/Users/wolfx/Applications/apache-maven-3.6.3/bin/mvn"
}
1
2
3
4