我的vscode插件和setting设置(解决vscode保存出现提示运行“XXX“的保存参与者: 快速修复“的问题;二来修复“明明开启的是去分号和单引号,自动保存又自动添加了分号和双引号)

一.插件
1.已启用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.禁用

在这里插入图片描述
在这里插入图片描述

二.setting设置

// 2020年2月21日00:49:01添加
{
  "window.zoomLevel": 1,
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // #去掉代码结尾的分号
  // "prettier.semi": true,
  // #使用单引号替代双引号
  // "prettier.singleQuote": true,
  // #让函数(名)和后面的括号之间加个空格
  // "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }
  },
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
  "stylusSupremacy.insertNewLineAroundImports": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.autoSave": "afterDelay", // import之后是否换行
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false, // 格式化不加分号
      "singleQuote": true // 格式化以单引号为主
    }
  },
  //分号和双引号确实不会再自动添加了,但是不会在方法括号之间插入空格,可以再加入这条配置即可
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // "workbench.colorTheme": "Monokai",
  "editor.matchBrackets": false,
  "workbench.iconTheme": "vscode-icons",
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": false,
    "suppressCommitNotFoundWarning": false,
    "suppressFileNotUnderSourceControlWarning": false,
    "suppressGitVersionWarning": false,
    "suppressLineUncommittedWarning": false,
    "suppressNoRepositoryWarning": false,
    "suppressUpdateNotice": false,
    "suppressWelcomeNotice": true
  },
  "files.associations": {
    "*.vue": "vue"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "editor.tabSize": 2,
  "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "none",
  "prettier.semi": false,
  "prettier.useTabs": false,
  "prettier.tabWidth": 2,
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "explorer.confirmDragAndDrop": false,
  // 2020年2月23日02:10:54增加切换保存
  "files.autoSave": "onFocusChange"
}

解释插件中禁用prettier的原因:会出现"vscode 保存就提示运行"XXX"的保存参与者: 快速修复"的问题;二来修复"明明开启的是去分号和单引号,自动保存又自动添加了分号和双引号";解决方法就是把prettier插件禁掉,同时把上面的setting加上.
同时说明为什么那么多注释:因为都是网上的98%方法都没解决问题,故留下注释记录.

附:大神的配置链接
https://github.com/varHarrie/varharrie.github.io/issues/10

### 配置 VSCode 插件 `settings.json` 示例及说明 #### 使用 Prettier ESLint 进行代码格式化 为了实现自动格式化的功能,可以按照以下方式配置 `.vscode/settings.json` 文件: ```json { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ], "prettier.singleQuote": true, "prettier.semi": false } ``` 上述配置实现了以下功能: - 启用了保存自动格式化 (`editor.formatOnSave`) [^1]。 - 将 Prettier 设为默认格式化工具 (`editor.defaultFormatter`) [^2]。 - 对 JavaScript 及其衍生语言启用了 ESLint 验证支持 [^3]。 #### Vue3 项目模板配置示例 对于 Vue3 项目,可以通过自定义代码片段来快速生成组件结构。以下是基于引用的内容创建的一个示例配置 [^4]: ```json { "Vue3 Component Template": { "prefix": "vue3c", "body": [ "<template>", " <div class=\"${1:component-name}\">${2}</div>", "</template>", "", "<script setup lang=\"ts\">", "import { ref, reactive } from 'vue';", "${3}", "</script>", "", "<style lang=\"less\" scoped>", "${4}", "</style>" ], "description": "Generates a Vue3 TypeScript component template." } } ``` 此代码片段的功能如下: - 提供了一个前缀命令 `vue3c` 来触发该模板。 - 自动生成 `<template>`、`<script setup>` `<style>` 结构。 - 支持 TypeScript 并引入 Vue 的核心 API (如 `ref`, `reactive`)。 #### 统一团队开发环境的设置 如果希望整个团队都遵循相同的 VSCode 设置,则可以在项目的根目录下新建一个 `.vscode/` 文件夹,并在其中放置 `settings.json` 文件。这样,任何克隆该项目的人都会继承这些统一的配置 。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值