VScode 编辑器配置

设置配置

{
  // 配置终端有在运行时关闭软件提醒
  "terminal.integrated.confirmOnExit": true,
  "editor.fontSize": 19, //字体
  "editor.tabSize": 2, // 间隔
  // 新建为html
  "files.defaultLanguage": "html",
  // 右侧预览关闭
  "editor.minimap.enabled": false,
  "editor.quickSuggestions": {
    "strings": true
  },
  "workbench.iconTheme": "material-icon-theme", // 图标美化
  // 选项卡颜色主题
  "workbench.colorCustomizations": {
    "tab.activeBorder": "#5996ff"
  },
  // eslint配置项,保存时自动修复错误
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  // html 标签不换行
  "typescript.validate.enable": false,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto",
      "end_with_newline": false
    }
  },
  // 让vetur使用vs自带的js格式化工具,以便在函数前面加个空格
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.semicolons": "remove",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 默认使用prettier格式化支持的文件
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 指定 *.vue 文件的格式化工具为vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // 配置工具默认
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  // 配置为Prettier插件
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  "git.ignoreMissingGitWarning": true,
  "explorer.confirmDelete": false,
  // Path Autocomplete 配置 @ 路径
  "path-autocomplete.extensionOnImport": true,
  "path-autocomplete.includeExtension": true,
  "path-autocomplete.enableFolderTrailingSlash": true,
  "path-autocomplete.pathMappings": {
    "@": "${folder}/src"
  },
  "workbench.activityBar.visible": true,
  "git.ignoreLegacyWarning": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "html.autoClosingTags": false,
  // 新创文件不自动添加注释
  "fileheader.configObj": {
    "autoAdd": false,
    "createHeader": false
  },
  //此为头部注释
  "fileheader.customMade": {
    "Description": "",
    "Version": "1.0",
    "Date": "Do not edit",
    "FilePath": "no item name",
  },
  //此为函数注释
  "fileheader.cursorMode": {
    "description": "",
    "param": "",
    "return": ""
  },
  "sass.andStared": [
    "active",
    "focus",
    "hover",
    "nth-child"
  ],
  "window.zoomLevel": 0,
  "editor.wordWrap": "on",
  "alias-skip.allowedsuffix": [
    "js",
    "vue",
    "jsx",
    "ts"
  ],
  "alias-skip.mappings": {
    "@": "/src"
  },
}

 

解决终端 无法加载文件.......,因为在此系统上禁止运行脚本

1. 以管理员身份运行vscode
2. 执行:get-ExecutionPolicy,显示Restricted,表示状态是禁止的
3. 执行:set-ExecutionPolicy RemoteSigned
4. 这时再执行get-ExecutionPolicy,就显示RemoteSigned

 

插件集合

Auto Rename Tag 修改 html 标签,自动帮你完成头部和尾部闭合标签的同步修改

Bootstrap 3 Snippets  Bootstrap3 代码提示

Chinese (Simplified) Language Pack for Visual Studio Code  中文包

CSS Peek  css预览

ESLint  格式代码规范,高亮提示

Image preview 图片预览

JavaScript (ES6) code snippets es6 代码提示

jQuery Code Snippets  jq代码提示 

Live Server   启动本地服务器

Material Icon Theme  文件图标主题

open in browser   支持快捷键与鼠标右键快速在浏览器中打开html文件

Path Autocomplete   路径补全

Prettier - Code formatter 代码格式

px2rem   px转rem

Syncing  同步设置插件

vscode-pdf   查看pdf文件

Markdown Preview Enhanced   .md 预览插件

Vetur  vue必备插件,高亮,格式

vscode-element-helper ElementUi 代码提示

Vue 2 Snippets vue 代码补全

Vant Snippets  小程序 Vant UI 代码提示

minapp     微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets)

wechat-snippet  微信小程序代码辅助,代码片段自动完成

wxapp-helper 小程序代码提示

node-snippets node.js 代码提示

别名路径跳转  别名路径跳转

 

vue-helper 组件提示

 

Vue Peek  快速找到组件

TypeScript Extension Pack  ts提示工具

 

VScode 查看 .md 文件

一、原生快捷键

    shift + ctrl + v

二、使用插件  Markdown Preview Enhanced 

1.VSCode 安装 插件  官网链接

2. 在 .md 的文件中右键 选择它 就打开拉

三、安装客户端 官方下载

 

Vscode中快速创建自定义代码模板

在vscode中点击左下角的设置---用户代码片段---输入:vue.json,将以下代码复制保存,然后新建.vue文件,输入:vue,回车即可。可按需自行添加内容。

{
  "Print to console": {
    "prefix": "vue",
    "body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  name: '',",
			"  props: [''],",
			"  data() {",
			"    return {}",
			"  },",
			"  components: {},",
			"  computed: {},",
			"  created() {},",
			"  methods: {},",
			"  watch: {},",
			"}",
			"</script>",
			"",
			"<style lang='' scoped>",
			"",
			"</style>",
			"",
    ],
    "description": "Log output to console"
  }
}

4.保存 

5.在html输入 vue-html 就直接有代码块了

 

vscode 路径自动补全插件 Path Autocomplete

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页