公司内 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"]
}

.prettierrc

{
  "trailingComma": "all",
  "tabWidth": 2,
  "printWidth": 120,
  "singleQuote": false,
  "endOfLine": "lf"
}

.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

配置支持别名跳转

根目录创建 jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["./*"],
      "~/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".nuxt", "dist", "static"]
}

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

需要的依赖（注意版本）：

{
  "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"
  }
}

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

{
  "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"
  }
}

{
  "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 ."
  }
}

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

需要的依赖：

{
  "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"
  }
}

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