VS Code 插件

VS Code 插件

图标	名字	说明
	Chinese(Simplified)	中文语言包
	Auto Close Tag	自动闭合标签
	Auto Rename Tag	修改标签对(修改标签尾部自动修改)
	Beautify	格式化 javascript, JSON, CSS, Sass, and HTML
	Bracket Pair Colorizer	不同括号不同颜色
	Color Info	颜色信息(鼠标悬停在颜色块上显示信息)
	Easy LESS	可以编写less文件
	ESLint	代码检查工具
	HTML Snippets	html5标准模板 可以进行相应的配置 C:\Users\Dexter\.vscode\extensions\abusaidm.html-snippets-0.1.0\snippets\snippets.json
	Image preview	侧边显示图片
	Live Server	实时更新 右下角 - 点击Go Live 出现 prop: 5500
	Material Theme	主题
	Material Theme Icons	图标美化
	open in browser	打开网页 在HTML页面右键 Open In Default Browser
	Path Autocomplete	./ 路径
	Path Intellisense	配置@|/ 路径提示 配合 jsconfig.json https://www.jianshu.com/p/de4cc836b147
	Prettier - Code formatter	代码规范
	px to rem & rpx & vw (cssrem)	px自动生成rem 设置 - 扩展 - css语言功能 - cssrem configuration 配置字号
	Vetur	vue代码高亮
	Vue 3 Snippets	vue2 3 代码提示 高亮 模板
	Easy Sass	可以编写scss文件
	GitHub Copilot	各种代码提示 据说可能会"革"程序员的命 总之变态

settings配置文件

{
  // prettier 的配置文件存放路径
  "prettier.configPath": "C:\\Users\\xx\\.prettierrc",
  // ---------------------------------------
  // 路径提示
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  // ---------------------------------------
  // 开启编辑器的保存自动格式化功能
  "editor.formatOnSave": true,
  // ESLint 插件的配置
  "eslint.alwaysShowStatus": true,
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.options": {
		"extensions": [
			".js",
			".vue",
			".jsx",
			".tsx"
		]
	},
	"editor.codeActionsOnSave": {
		 "source.fixAll.eslint": true
	},
  // ---------------------------------------
  // 每行文字个数超出此限制将会被迫换行
  "prettier.printWidth": 300,
  // 使用单引号替换双引号
  "prettier.singleQuote": true,
  "prettier.arrowParens": "avoid",
  "prettier.trailingComma": "none",
  "prettier.semi": false,
  // react
  // 当按tab键的时候，会自动提示
  "emmet.triggerExpansionOnTab": true,
  "emmet.showAbbreviationSuggestions": true,
  "emmet.includeLanguages": {
    // jsx的提示
    "javascript": "javascriptreact",
    "vue-html": "html",
    "vue": "html",
    "wxml": "html"
  },
  // ---------------------------------------
  // 设置 .vue 文件中，HTML代码的格式化插件
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // 忽略警告信息
  "vetur.ignoreProjectWarning": true,
  // 防止自动导入
  "vetur.completion.autoImport": false,
  // 不验证 .vue 组件的模板结构
  "vetur.validation.template": false,
  // vetur 默认的格式化配置项
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "trailingComma": "none",
      "semi": false,
      "singleQuote": true,
      "arrowParens": "avoid",
      "printWidth": 300
    },
    "js-beautify-html": {
      "wrap_attributes": false
    }
  },
  // ---------------------------------------
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // ---------------------------------------
  // 导入模块时包含模块的后缀名
  "path-autocomplete.extensionOnImport": true,
  // 路径提示
  "path-autocomplete.pathMappings": {
    "@": "${folder}/src"
  },

  "workbench.colorTheme": "Material Theme Palenight High Contrast",
  "files.autoSave": "onFocusChange",
  "less.compile": {
    "out": "../css/"
  },
  
  "easysass.compileAfterSave": true, 
  "easysass.formats": [ //nested：嵌套缩进的 css 代码。
  //expanded：没有缩进的、扩展的css代码。
  //compact：简洁格式的 css 代码。
  //compressed：压缩后的 css 代码

        {
            "format": "expanded",
            "extension": ".css"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        }
    ],
  "easysass.targetDir": "css/", //路径
  "git.autofetch": true,
  "workbench.colorCustomizations": {
    "terminal.background": "#292d3e",
    "terminal.foreground": "#b16dff",
    "terminalCursor.background": "#BCBABE",
    "terminalCursor.foreground": "#BCBABE",
    "terminal.ansiBlack": "#2E2A31",
    "terminal.ansiBlue": "#796AF5",
    "terminal.ansiBrightBlack": "#f7bc64",
    "terminal.ansiBrightBlue": "#796AF5",
    "terminal.ansiBrightCyan": "#DC8A0E",
    "terminal.ansiBrightGreen": "#17AD98",
    "terminal.ansiBrightMagenta": "#BB60EA",
    "terminal.ansiBrightRed": "#f55050",
    "terminal.ansiBrightWhite": "#F5F4F7",
    "terminal.ansiBrightYellow": "#58d1f7",
    "terminal.ansiCyan": "#149BDA",
    "terminal.ansiGreen": "#3bcfbc",
    "terminal.ansiMagenta": "#39d47a",
    "terminal.ansiRed": "#D8137F",
    "terminal.ansiWhite": "#BCBABE",
    "terminal.ansiYellow": "#DC8A0E"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "diffEditor.ignoreTrimWhitespace": false,
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.inlineSuggest.enabled": true,
  "typescript.format.enable": false,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}