Skip to content

记录:VSCode个人配置 #4

@idseventeen

Description

@idseventeen

之前的配置弄丢了,在这里备份一下吧
主要用于前端开发(Vue、小程序)
使用eslint-standard规范

吐槽:

  1. vscode有单引号规则配置,但format时却没有效果
  2. prettier不支持定义函数参数括号前的空格的处理方式

VSCode配置Settings.json

{
  "editor.tabSize": 2,
  "editor.renderWhitespace": "boundary",
  "editor.formatOnType": true,
  "editor.formatOnPaste": true,
  "editor.renderControlCharacters": true,
  "editor.quickSuggestions": {
    "strings": true
  },
  "workbench.iconTheme": "vscode-icons",
  "workbench.colorTheme": "One Dark Pro Vivid",
  "workbench.editor.showTabs": true,
  "git.autofetch": true,
  "git.confirmSync": false,
  "files.trimTrailingWhitespace": true,
  "files.associations": {
    "*.wpy": "vue",
    "*.wxss": "css",
    "*.wxml": "wxml",
    "*.vm": "html",
    "*.wxc": "vue",
    "*.wepg": "html",
    "*.js": "javascript",
    "*.cjson": "jsonc",
    "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
    "wxml": "html",
    "vue-html": "html"
  },
  "window.zoomLevel": 0,
  "terminal.integrated.cursorBlinking": true,
  "better-comments.highlightPlainText": true,
  "gitlens.hovers.currentLine.over": "line",
  "minapp-vscode.disableAutoConfig": true,
  "npm-intellisense.importLinebreak": "",
  "javascript.preferences.quoteStyle": "single",
  "javascript.format.insertSpaceAfterConstructor": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.format.semicolons": "remove",
  "javascript.implicitProjectConfig.checkJs": true,
  "typescript.preferences.quoteStyle": "single",
  "typescript.format.insertSpaceAfterConstructor": true,
  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.semicolons": "remove",
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      // "autoFix": true
    }
  ],
  "prettier.printWidth": 99999,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  // prettier-vscode@2.3.0版本无效,暂且保留吧
  "prettier.spaceBeforeFunctionParen": true,
  // eslint配置格式化文档(仅在prettier-vscode@2.3.0版本有效)
  "prettier.eslintIntegration": true,
  // tslint配置格式化文档(仅在prettier-vscode@2.3.0版本有效)
  "prettier.tslintIntegration": true,
  "extensions.showRecommendationsOnlyOnDemand": true,
  // TIP: prettier-vscode和vscode-typescript都不能完整的支持standardjs标准
  //      vue文件格式化使用vscode-typescript,尽量使用vscode内置格式化标准来吧...
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.ts": "vscode-typescript",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "yzhang.markdown-all-in-one"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "extensions.autoUpdate": false,
}

插件列表

名称: Auto Close Tag
id: formulahendry.auto-close-tag
说明: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
版本: 0.5.6
发布者: Jun Han
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

名称: Auto Rename Tag
id: formulahendry.auto-rename-tag
说明: Auto rename paired HTML/XML tag
版本: 0.1.1
发布者: Jun Han
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

名称: Better Comments
id: aaron-bond.better-comments
说明: Improve your code commenting by annotating with alert, informational, TODOs, and more!
版本: 2.0.5
发布者: Aaron Bond
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

名称: carbon-now-sh
id: ericadamski.carbon-now-sh
说明: A Code package to open the current editor content in carbon.now.sh
版本: 1.2.0
发布者: Eric Adamski
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh

名称: Docker
id: ms-azuretools.vscode-docker
说明: Adds syntax highlighting, commands, hover tips, and linting for Dockerfile and docker-compose files.
版本: 0.8.2
发布者: Microsoft
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

名称: Document This
id: joelday.docthis
说明: Automatically generates detailed JSDoc comments in TypeScript and JavaScript files.
版本: 0.7.1
发布者: Joel Day
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=joelday.docthis

名称: EditorConfig for VS Code
id: editorconfig.editorconfig
说明: EditorConfig Support for Visual Studio Code
版本: 0.14.2
发布者: EditorConfig
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

名称: eggjs
id: atian25.eggjs
说明: vscode extension for https://eggjs.org/
版本: 0.3.1
发布者: atian25
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=atian25.eggjs

名称: ESLint
id: dbaeumer.vscode-eslint
说明: Integrates ESLint JavaScript into VS Code.
版本: 1.9.1
发布者: Dirk Baeumer
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

名称: GitLens — Git supercharged
id: eamodio.gitlens
说明: Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more
版本: 10.1.2
发布者: Eric Amodio
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

名称: HTML CSS Support
id: ecmel.vscode-html-css
说明: CSS support for HTML documents
版本: 0.2.3
发布者: ecmel
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

名称: HTML Snippets
id: abusaidm.html-snippets
说明: Full HTML tags including HTML5 Snippets
版本: 0.2.1
发布者: Mohamed Abusaid
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets

名称: JavaScript (ES6) code snippets in StandardJS style
id: jmsv.javascriptsnippetsstandard
说明: Code snippets for JavaScript in ES6 syntax in StandardJS style
版本: 1.7.2
发布者: James Vickery
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=jmsv.JavaScriptSnippetsStandard

名称: Live Server
id: ritwickdey.liveserver
说明: Launch a development local Server with live reload feature for static & dynamic pages
版本: 5.6.1
发布者: Ritwick Dey
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

名称: Markdown All in One
id: yzhang.markdown-all-in-one
说明: All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)
版本: 2.5.1
发布者: Yu Zhang
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

名称: markdownlint
id: davidanson.vscode-markdownlint
说明: Markdown linting and style checking for Visual Studio Code
版本: 0.32.0
发布者: David Anson
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint

名称: minapp
id: qiu8310.minapp-vscode
说明: 微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets)
版本: 2.2.2
发布者: Mora Qiu
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=qiu8310.minapp-vscode

名称: npm
id: eg2.vscode-npm-script
说明: npm support for VS Code
版本: 0.3.9
发布者: egamma
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script

名称: npm Intellisense
id: christian-kohler.npm-intellisense
说明: Visual Studio Code plugin that autocompletes npm modules in import statements
版本: 1.3.0
发布者: Christian Kohler
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

名称: One Dark Pro
id: zhuangtongfa.material-theme
说明: Atom's iconic One Dark theme for Visual Studio Code
版本: 2.28.3
发布者: binaryify
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

名称: open in browser
id: techer.open-in-browser
说明: This allows you to open the current file in your default browser or application.
版本: 2.0.0
发布者: TechER
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

名称: Path Intellisense
id: christian-kohler.path-intellisense
说明: Visual Studio Code plugin that autocompletes filenames
版本: 1.4.2
发布者: Christian Kohler
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

名称: Prettier - Code formatter
id: esbenp.prettier-vscode
说明: Code formatter using prettier
版本: 2.3.0
发布者: Esben Petersen
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

名称: Sass
id: syler.sass-indented
说明: Indented Sass syntax Highlighting, Autocomplete & Formatter
版本: 1.6.9
发布者: Syler
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented

名称: Sass Lint
id: glen-84.sass-lint
说明: Sass Lint for Visual Studio Code
版本: 1.0.6
发布者: glen-84
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=glen-84.sass-lint

名称: StandardJS - JavaScript Standard Style
id: chenxsan.vscode-standardjs
说明: Integrates JavaScript Standard Style into VS Code.
版本: 1.2.3
发布者: Sam Chen
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=chenxsan.vscode-standardjs

名称: Swagger Viewer
id: arjun.swagger-viewer
说明: Swagger Viewer lets you preview and validate Swagger 2.0 and OpenAPI files as you type in Visual Studio Code.
版本: 2.2.2
发布者: Arjun G
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=Arjun.swagger-viewer

名称: TSLint
id: ms-vscode.vscode-typescript-tslint-plugin
说明: TSLint support for Visual Studio Code
版本: 1.2.3
发布者: Microsoft
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin

名称: Vetur
id: octref.vetur
说明: Vue tooling for VS Code
版本: 0.22.6
发布者: Pine Wu
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=octref.vetur

名称: vscode weapp api
id: coderfee.vscode-weapp-api
说明: Wechat app api snippets for vscode
版本: 0.1.8
发布者: coderfee
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=coderfee.vscode-weapp-api

名称: vscode wxml
id: coderfee.vscode-wxml
说明: Wechat wxml support/snippets for vscode
版本: 0.1.9
发布者: coderfee
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=coderfee.vscode-wxml

名称: vscode-element-helper
id: elemefe.vscode-element-helper
说明: A vscode extension for Element-UI
版本: 0.5.6
发布者: ElemeFE
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=ElemeFE.vscode-element-helper

名称: vscode-icons
id: vscode-icons-team.vscode-icons
说明: Icons for Visual Studio Code
版本: 9.5.0
发布者: VSCode Icons Team
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

名称: YAML
id: redhat.vscode-yaml
说明: YAML Language Support by Red Hat, with built-in Kubernetes and Kedge syntax support
版本: 0.5.3
发布者: Red Hat
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions