vscode的setting.json个人配置及个人常用插件

vscode这个编辑器,前端工作人员使用的非常多,我也是经常使用,每次在新的电脑上使用时都要重新写setting.json配置,感觉很麻烦,就写了这篇文章记录下自己的一些常用配置。顺便说一句,setting.json配置没有最好的,只有最适合自己的。

{
  "files.associations": {
  "*.vue": "vue",
  "*.wpy": "vue",
  "*.wxml": "html",
  "*.wxss": "css"
  },
  //主题颜色 
  "explorer.confirmDelete": false,
  "editor.fontSize": 14,
  "window.zoomLevel": 1,
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #值设置为true时,每次保存的时候自动格式化;
  "editor.formatOnSave": false,
  "workbench.editor.enablePreview": false, // 关闭文件的预览模式
  "workbench.iconTheme": "material-icon-theme",
  // 在使用搜索功能时,将这些文件夹/文件排除在外
  "search.exclude": {
      "**/node_modules": true,
      "**/bower_components": true,
      "**/target": true,
      "**/logs": true,
  }, 
  // 这些文件将不会显示在工作空间中
  "files.exclude": {
      "**/.git": true,
      "**/.svn": true,
      "**/.hg": true,
      "**/CVS": true,
      "**/.DS_Store": true,
      "**/*.js": {
          "when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中
      },
      "**/node_modules": true
  }, 
  "editor.suggest.snippetsPreventQuickSuggestions": true
}

二、个人常用插件

Auto Close Tag(自动补全 html 标签)

Auto Rename Tag(自动完成另一侧标签的同步修改)

Babel ES6/ES7

Bracket Pair Color DLW(为多个括号添加不同的颜色)

Chinese(汉化,安装后点击ctrl + shift + p快捷键,然后在命令窗口中输入Configure Display Language,点击确定之后选择zh-cn即可切换到中文版)

Debugger for Chrome

easy less(保存less之后自动生成css)

easy sass (保存sass之后自动生成css)

ESLint

GitLens — Git supercharged(git提交日志)

HTML CSS Support

HTML Snippets

Highlight Matching Tag

IntelliSense for CSS class names in HTML

JavaScript (ES6) code snippets(ES6语法智能提示)

Material Icon Theme

npm Intellisense

open in browser

Path Intellisense

Windows Colors(每个vscode窗口自动着色,这里提供几个颜色:#08436E)

Prettier - Code formatter

React Native Tools

React/Redux/react-router Snippets

SVG Viewer

Trailing Spaces

Vetur

settings sync(设置同步插件,个人不太喜欢使用这个插件)

三、个人常用软件

notepad++

四:vue3开发插件

插件市场搜索 Vue Language Features (Volar) 和 TypeScript Vue Plugin (Volar) 安装,且禁用 Vetur

  • 3
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 好的,下面是配置setting.json文件实现自动格式化的步骤: 1. 打开VS Code,按下 `Ctrl + Shift + P`,在搜索框中输入“settings.json”,选择“Preferences: Open User Settings”选项,打开用户设置。 2. 在用户设置页面中,点击右上角的“{}”按钮,打开settings.json文件。 3. 在settings.json文件中,添加以下内容: ```json "editor.formatOnSave": true, "[javascript]": { "editor.formatOnSave": false }, "[json]": { "editor.formatOnSave": true }, "[typescript]": { "editor.formatOnSave": false }, ``` 其中,`editor.formatOnSave`表示保存时是否自动格式化代码。在上面的配置中,JavaScript文件保存时不进行自动格式化,而JSON文件保存时自动格式化。 4. 保存settings.json文件,配置就生效了。 这样,当你在VS Code中编辑代码时,保存文件时会自动进行格式化,让你的代码更加整洁易读。 ### 回答2: VSCode是一款功能强大的代码编辑器,可以通过配置setting.json文件实现自动格式化。 首先,我们需要打开VSCode并在左侧的侧边栏中选择“扩展”图标。接下来,点击搜索框并输入“Prettier - Code formatter”来安装Prettier插件。Prettier是一个代码格式化工具,可以帮助我们自动格式化代码。 安装完成后,点击左上角的文件菜单,选择“首选项”并选择“设置”。这将打开setting.json文件,其中包含了VSCode的所有配置选项。 在setting.json文件中,我们需要配置以下几个参数来实现自动格式化: 1. `"editor.formatOnSave": true`:这个参数表示在保存文件时自动格式化代码。 2. `"editor.defaultFormatter": "esbenp.prettier-vscode"`:这个参数指定了默认的代码格式化工具为Prettier。 配置完成后,保存setting.json文件。现在,只要我们编辑保存文件时,VSCode将会自动调用Prettier插件来格式化代码。 此外,我们还可以根据自己的需求进行更多的配置。例如,可以配置Prettier的格式化规则,如缩进大小、换行符等。可以在setting.json文件中添加以下参数: ``` "prettier.tabWidth": 2, "prettier.singleQuote": true ``` 这两个参数分别设置缩进大小为2和使用单引号。根据自己的需要进行配置即可。 总之,通过配置setting.json文件中的相关选项,我们可以实现VSCode的自动格式化功能,使代码看起来更加整洁和易读。 ### 回答3: 要实现在VSCode中自动格式化代码,需要配置setting.json文件。首先,打开VSCode,点击左下角的设置图标,选择“首选项”>“设置”。在用户设置或工作区设置中,找到“Editor: Default Formatter”选项,并选择适合的代码格式化程序,如Prettier。 接下来,在setting.json文件中添加以下代码实现自动格式化: { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" } 其中,"editor.formatOnSave": true表示在保存文件时自动格式化代码,"editor.defaultFormatter": "esbenp.prettier-vscode"表示使用Prettier作为默认的代码格式化程序。 保存setting.json文件后,即可在保存文件时自动进行代码格式化。这样可以节省时间和提高代码的可读性。 需要注意的是,如果VSCode中还没有安装Prettier插件,需要先安装该插件,方法是点击左侧的扩展图标,搜索Prettier,然后选择并安装。这样才能正确使用Prettier进行代码格式化。 通过以上步骤配置setting.json文件,就可以在VSCode中实现自动格式化代码的功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值