vscode 前端最佳配置小结

 "files.associations": {
	    "*.vue": "html",
	    "*.wxss": "css"
	 }

{ // vscode主题配置
  "editor.tabsize": 2,
  "editor.lineheight": 24,
  "editor.renderlinehighlight": "none",
  "editor.renderwhitespace": "none",
  "editor.fontfamily": "consolas",
  "editor.fontsize": 15,
  "editor.cursorblinking": "smooth",
  "editor.multicursormodifier": "ctrlcmd",
  "editor.snippetsuggestions": "top",
  // 使用vscode的自动格式化时，有时会把一行过长的代码折行。400表示400个字符处折行
  "editor.wordwrapcolumn": 400,
  "editor.wordwrap": "off",
  "editor.quicksuggestions": {
    "other": true,
    "comments": true,
    "strings": false
  },
  "editor.codeactionsonsave": {
    "source.organizeimport": true
  },
  // 保存文件时，自动格式化
  "editor.formatonsave": false,
  // 格式化粘贴到文件内的内容
  "editor.formatonpaste": false,
  "terminal.integrated.shell.windows": "c:\\windows\\system32\\windowspowershell\\v1.0\\powershell.exe",
  "javascript.suggestionactions.enabled": false,
  "javascript.updateimportsonfilemove.enabled": "always",
  "javascript.implicitprojectconfig.experimentaldecorators": true,
  "[html]": {
    "editor.defaultformatter": "esbenp.prettier-vscode"
  },

  "workbench.icontheme": "vscode-great-icons",
  "workbench.startupeditor": "newuntitledfile",
  "workbench.colortheme": "dracula soft",
  "workbench.colorcustomizations": {
    // 设置guide线高亮颜色
    "editorindentguide.activebackground": "#ff0000"
  },
  // css2rem插件配置:设置书写css时，px自动提示转换为rem的根字体大小，默认值为16
  "cssrem.rootfontsize":100,
  // 启用/禁用导航路径
  "breadcrumbs.enabled": true,
  // 通过默认浏览器打开html文件
  "open-in-browser.default": "chrome",
  // vscode进行文件搜索时，不搜索这些区域。注意：vs已经贴心的默认设置了 node_modules 和 bower_components 文件夹
  "search.exclude": {
    "**/.git": true,
    "**/.gitignore": true,
    "**/.svn": true,
    "**/.ds_store": true,
    "**/.idea": true,
    "**/.vscode": false,
    "**/yarn.lock": true,
    "**/tmp": true,
    "**/dist": true,
    "**/build": true,
  },
  // 配置文件关联
  // 比如小程序中的 .wxss 这种文件，会把它作为css文件来处理，提供对应的css的语法提示，css的格式化等等。
  "files.associations": {
    "*.wxss": "css",
    "*.cjson": "jsonc",
    "*.wxs": "javascript",
    "*.ts": "typescript",
    "*.vue": "vue",
    "*.dart": "dart"
  },
  // vscode已经内置了emmet。配置emmet是否启用tab展开缩写
  // 这一设置最大作用是：当输入的文本不属于emmet定义的缩写规则时，依然允许使用tab键进行缩进。此时会提示我自定义的缩写语句，以及各插件自定义的缩写语句.
  "emmet.triggerexpansionontab": true,
  "emmet.showsuggestionsassnippets": true,
  // 配置emmet对哪种文件类型支持
  "emmet.syntaxprofiles": {
    "vue-html": "html",
    "vue": "html",
    "javascript": "javascriptreact",
    "xml": {
      "attr_quotes": "single"
    }
  },
  // 在 react 的jsx中添加对emmet的支持
  "emmet.includelanguages": {
    "jsx-sublime-babel-tags": "javascriptreact",
    "wxml": "html"
  },
  // 格式化快捷键 shirt+alt+f，有时可能需要多按几次
  // 因为使用 shirt+alt+f进行格式化时，先执行编辑器的格式化规则，然后才会按照eslint和tslit这样的其他插件去格式化。
  // 是否开启eslint检测
  "eslint.enable": true,
  // 是否启用根据eslint配置文件。文件保存时，根据配置文件进行格式化
  "eslint.autofixonsave": true,
  // eslint配置文件 ,修改为你自己电脑上的文件位置，或者直接删除
  "eslint.options": {
    "configfile": "d:/worksapce/youxiang-mobile-master/.eslintrc.js",
    "plugins": ["html"]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    "typescript",
    "typescriptreact"
  ],
  // 安装了tslint插件后，是否启用该插件
  "typescript.validate.enable": false,
  // git是否启用自动拉取
  "git.autofetch": true,
  // 配置gitlen中git提交历史记录的信息显示情况
  "gitlens.advanced.messages": {
    "suppresscommithasnopreviouscommitwarning": false,
    "suppresscommitnotfoundwarning": false,
    "suppressfilenotundersourcecontrolwarning": false,
    "suppressgitversionwarning": false,
    "suppresslineuncommittedwarning": false,
    "suppressnorepositorywarning": false,
    "suppressresultsexplorernotice": false,
    "suppressshowkeybindingsnotice": true,
    "suppressupdatenotice": true,
    "suppresswelcomenotice": false
  },
  // 是否格式化python文件
  "python.linting.enabled": false,
  // 设置端口。开启apicloud在vscode中的wifi真机同步
  "apicloud.port": "23450",
  // 设置apicloud在vscode中的wifi真机同步根目录，默认可不设置
  "apicloud.subdirectories": "/apicloudproject",
  // 这个设置是全局的，不可为每种语言配置。
  // 断点调试时，遇到断点，自动显示调试视图。
  "debug.opendebug": "openondebugbreak",
  // 专为dart语言配置
  "[dart]": {
    // snippet ：代码片段
    // 保存文件时，是否自动格式化代码，
    "editor.formatonsave": true,
		// 当你输入特定字符时，是否自动格式化代码，(比如输入 `;` 和 `}`).
		"editor.formatontype": true,

		// 在80个字符处画一条引导线，这个范围内的dart代码将被格式化。
		"editor.rulers": [80],

		// 禁用与所选内容匹配的单词的内置突出显示。如果不这样做，所选文本的所有实例都将突出显示，从而影响dart突出显示所选变量的精确引用的能力。
		"editor.selectionhighlight": false,

    // 默认情况下，当处于“代码片段模式”（在插入的代码中编辑占位符）时，vs会防止snippets弹出打开。
    // 如果设置为“false”，则表示允许完成操作打开，就像不在代码段占位符中
		"editor.suggest.snippetspreventquicksuggestions": true,

    // coding时，vscode会给我们给多提示，在所有的提示选项中会默认选中第一个，这一配置就是表示默认选中哪一项。
		// 默认值为："first"，表示vscode将总是选中第一项
		// （推介） "recentlyused" 表示vs code将从代码提示中，预先选中最近使用过的项，
		"editor.suggestselection": "recentlyusedbyprefix",

		// 允许使用按<tab>速写代码片段，例如，输入“for”时，即使完成列表不可见。
		"editor.tabcompletion": "onlysnippets",

		// 默认情况下，当前的语言没有代码片段提示时，vs code将使用当前文件中的你自己写过的单词来显示代码片段提示。
    // 这导致代码完成在编辑注释和字符串时建议单词。 此设置将阻止这种情况
    // 对于dart来说最好关闭，对于html和css建议开启    
    "editor.wordbasedsuggestions": false,

		// 在文件底部添加新代码行时，强制所有文件都有一行空格。
		"files.insertfinalnewline": true,
  }
}

{
	"用户信息": {
		// prefix: 在编辑器中输入 author 时，编辑器建议中会显示该片段。
		"prefix": "author",
		// tm_filename_base: 当前文件名
		// current_year：年（4位数） current_year_short：年（2位数） current_month：月 current_date：日 
		// current_hour：小时 current_minute ：分钟 current_second：秒
		"body": [
			"/*",
			"* @module ${tm_filename_base}",
			"* @author : ifredom",
			"* @description : ifredom是一位fd.",
			"* @since : 创建时间 ${current_year}-${current_month}-${current_date} ${current_hour}:${current_minute}:${current_second}",
			"*/",
			""
		],
		// 描述说明，在片段说明中会显示此字段的文本内容。
		"description": "insert description."
	}
}