VS code 配置文件
我一直觉得所谓的编辑器之争与语言之争以及编程风格之争是一件很无聊的事情，一个优秀的工程师需要学会在合适的地方选择合适的工具或语言帮助自己完成任务，而几个同样优秀的编程风格之间最重要的是有一个统一的标准。或许是我见识浅薄，但我坚持认为只有拥有这样的认知标准才能称为一个优秀的工程师，而不是成为语言和工具的奴隶。
VS code 确实对我来说拥有无与伦比的优势，相比于插件丰富的 Atom 来说，vs code 内置的终端确实更对我的胃口，经过简单的配置就可以使用，在这一点上的确对我很有吸引力。
vscode配置
{
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false,
"suppressUpdateNotice": false,
"suppressWelcomeNotice": true
},
// 开启vscode-icons主题
"workbench.iconTheme": "vscode-icons",
// 个人感觉颜色比较鲜艳的主题
"workbench.colorTheme": "One Dark Pro Vivid",
// 我在这里对自动保存设置了一个延迟
"files.autoSave": "afterDelay",
"git.confirmSync": false,
"editor.formatOnType": true,
// 在这里主要做了对vue语言的支持
"files.associations": {
"*.vue": "vue",
"*.js": "javascript",
"*.md": "markdown"
},
// 将一些不必要的搜索范围去掉
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true,
"**/.git": true
},
// 主要是设置选中范围是尖角还是圆角，没啥必要
"editor.roundedSelection": false,
// 因为有时后需要查看.git的设置，所以将.git加入显示范围
"files.exclude": {
"**/.git": false,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true
},
// 这里主要是设置emmet对于vue的支持
"emmet.syntaxProfiles": {
"vue": "html",
"vue-html": "html",
},
// 同上
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html",
"javascript": "javascriptreact"
},
// 我比较喜欢用Enter换行，所以emmet提示设置只用tab选择
"emmet.triggerExpansionOnTab": true,
// Fira Code是我最喜欢的字体，下面会介绍原因
"editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
// 将行高设置高一点会显得很高大上且舒服
"editor.lineHeight": 24,
// 缩进规则，主要看公司要求和个人习惯
"[javascript]": {
"editor.insertSpaces": true,
"editor.tabSize": 4
},
// 因为我没怎么用过打开的编辑器，都是用cmd+p进行跳转。。
"explorer.openEditors.visible": 0,
// 主要是一些css代码规范的问题，禁用important
"css.lint.important": "error",
"less.lint.important": "error",
"scss.lint.important": "error",
// 设置eslint对于vue的支持
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
// 我不是很喜欢小地图。。
"editor.minimap.enabled": false,
// Fira Code 支持需要开启
"editor.fontLigatures": true,
"editor.tabSize": 4,
// 对于一些比较头痛的地方禁用emmet
"emmet.excludeLanguages": [
"markdown",
"less",
"pug"
],
// 设置代码换行大小
"editor.rulers": [
80,
120
],
"todohighlight.include": [
"**/*.js",
"**/*.jsx",
"**/*.ts",
"**/*.tsx",
"**/*.html",
"**/*.php",
"**/*.css",
"**/*.scss",
"**/*.less",
"**/*.vue"
],
// 一个给文件加注释头的插件。。
"topper.headerTemplates": [
{
"defaultCStyled": {
"headerBegin": "/**",
"headerPrefix": "*",
"headerEnd": "*/",
"template": [
"${headerBegin}",
"${headerPrefix} ${fileName}",
"${headerPrefix} @author ${author}",
"${headerPrefix} @description ${description}",
"${headerPrefix} @created ${createdDate}",
"${headerPrefix} @copyright ${copyright}",
"${headerPrefix} @last-modified ${lastModifiedDate}",
"${headerEnd}"
]
}
},
{
"python": {
"headerBegin": "#",
"headerPrefix": "#",
"headerEnd": "#",
"template": [
"${headerBegin}",
"${headerPrefix} ${fileName}",
"${headerPrefix} @author ${author}",
"${headerPrefix} @description ${description}",
"${headerPrefix} @created ${createdDate}",
"${headerPrefix} @last-modified ${lastModifiedDate}",
"${headerEnd}"
]
}
}
],
"topper.customTemplateParameters": [
{
"personalProfile": {
"author": "yungcho",
"website": "",
"copyright": "None \n None",
"license": "None",
"email": "yungcho@foxmail.com"
}
},
{
"officeProfile": {
"author": "Cao Yong",
"department": "PGC",
"email": "caoyong@bytedance.com"
}
}
],
"git.autofetch": true,
"workbench.activityBar.visible": true,
}
字体介绍
一个非常漂亮的连字体，专为程序员设计。具体不再赘述，详细可以查看 fira code 的 github
插件
Auto Close Tag
Auto Close Tag 可以帮助我们自动闭合标签，并且可以帮我们检查标签是否完备，这在使用Vue、React组件式开发的过程中可以帮助我们节省大量的时间。
Auto Rename Tag
与 Auto Close Tag 是一对，可以在我们修改标签的时候自动帮助我们修改一对。
Beautify
一个自动格式化软件
Bracket Pair Colorizer
一个自动给括号上不同颜色的插件，妈妈再也不怕我面对括号嵌套了。
EditorConfig VS Code Snippet
项目文件中的.editorconfig文件，加上这个插件就能自动读取了。
ESLint
一个添加vscode对于eslint支持的插件，加上以后不需要命令行就可以直接在编辑器中标识不符合规则的部分。
filesize
一个可以自动标识文件大小的小插件
Git History
gitHistory
一个很方便的查看git历史记录的插件
GitLens
GitLens
一个可以看到当前代码提交记录的插件
HTML CSS SUPPORT
代码补全工具
HTML Snippets
HTML的snippet插件
html snippet
One Dark Pro
oneDarkPro
很漂亮的vscode主题，再也不羡慕Atom了
Path Intellisense
自动路径提示
path intellisense
Regex Previewer
一个写完正则就可以直接测试的插件
TODO Highlight
一个TODO LIST的插件
Vetur
vue官方推荐的插件，可以代码提示等功能
vscode-icons
很漂亮且很实用的图标插件，帮助我们区分不同类型。
vscode-icon
