新点前端扩展工具包

扩展包内容

sonarlint
ESLint
Prettier - Code formatter
Vetur
Live Server
Live Sass Compiler
中文语言包Chinese (Simplified) Language Pack for Visual Studio Code
mini Snippet
SVN
GitLens
Git Graph
Code Spell Checker
vscode-fileheader

统一配置

sonarlint

安装好sonarlint之后，在vscode的配置文件中新增以下配置，即可直接接入我们统一最新的规则集。

{
   "sonarlint.connectedMode.connections.sonarqube": [
       {
           "serverUrl": "http://192.168.217.213/",
           "token": "aaec8b1347321d20c04ebf760925c95625036844"
       }
   ],
   "sonarlint.connectedMode.project": {
       "projectKey": "epointfe"
   }
}

查看效果

ESLint

统一的eslint配置文件请从 http://192.168.0.200/fepublic/lintconfig 获取。

在vscode中配置文件中新增以下记录：

{
  "eslint.options": { "configFile": "C:/mydirectory/.eslintrc.js" }
}

在配置了 eslint.useESLintCLass 为 true 的情况下请使用下面的配置。

{
  "eslint.options": { "overrideConfigFile": "C:/mydirectory/.eslintrc.js" }
}

注意将 mydirectory 改为自己放置的目录

详细说明

eslint 安装

使用如下命令全局安装 eslint

npm install -g eslint --registry=https://registry.npm.taobao.org/

需要已经安装nodejs，未安装请前往 https://nodejs.org/zh-cn/下载安装

使用此配置

方式一： 单个项目使用

直接将此配置文件拷贝到项目根目录下即可

方式二： 全部项目使用

在vscode中配置文件中新增以下记录：

{
  "eslint.options": { "configFile": "C:/mydirectory/.eslintrc.js" }
}

在配置了 eslint.useESLintCLass 为 true 的情况下请使用下面的配置。

{
  "eslint.options": { "overrideConfigFile": "C:/mydirectory/.eslintrc.js" }
}

注意将 mydirectory 改为自己放置的目录

操作步骤如下：

Prettier

安装 Prettier 后，加入如下配置。应用对应语言使用 Prettier ，并使用团队规范要求的格式化配置

点击展开

{
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.tabWidth": 4,
  "prettier.jsxBracketSameLine": true,
  "prettier.printWidth": 120,
  "prettier.singleQuote": true,
  "prettier.semi": true,
  "prettier.trailingComma": "none",
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.options.tabSize": 4,
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "wrapAttributes": false,
      "printWidth": 120,
      "jsxBracketSameLine": true
    },
    "prettier": { "trailingComma": "none", "jsxBracketSameLine": true }
  }
}