본문 바로가기

IT/html-css

HTML5-CSS3 개발을 위한 vscode 플러그인

반응형

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag 

 

Auto Rename Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Auto rename paired HTML/XML tag

marketplace.visualstudio.com

 

https://marketplace.visualstudio.com/items?itemName=ullissescastro.theme-bracketslight 

 

Brackets Light - Visual Studio Marketplace

Extension for Visual Studio Code - Brackets.io Color Scheme

marketplace.visualstudio.com

https://marketplace.visualstudio.com/items?itemName=pucelle.vscode-css-navigation 

 

CSS Navigation - Visual Studio Marketplace

Extension for Visual Studio Code - Allows Go to Definition from HTML to CSS / Sass / Less; provides Completion and Workspace Symbols for class & id name.

marketplace.visualstudio.com

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint 

 

ESLint - Visual Studio Marketplace

Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.

marketplace.visualstudio.com

https://marketplace.visualstudio.com/items?itemName=Janne252.fontawesome-autocomplete 

 

Font Awesome Auto-complete & Preview - Visual Studio Marketplace

Extension for Visual Studio Code - Autocomplete & preview Font Awesome icons in any language.

marketplace.visualstudio.com

https://marketplace.visualstudio.com/items?itemName=hwencc.html-tag-wrapper 

 

html tag wrapper - Visual Studio Marketplace

Extension for Visual Studio Code - wrap selected html tag by press ctrl+i, you can change the wrapper tag name simply too

marketplace.visualstudio.com

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer 

 

Live Server - Visual Studio Marketplace

Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages

marketplace.visualstudio.com

https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode 

 

Power Mode - Visual Studio Marketplace

Extension for Visual Studio Code - Your code is powerful, unleash it! The extension made popular by Code in the Dark has finally made its way to VS Code.

marketplace.visualstudio.com

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode 

 

Prettier - Code formatter - Visual Studio Marketplace

Extension for Visual Studio Code - Code formatter using prettier

marketplace.visualstudio.com

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons 

 

vscode-icons - Visual Studio Marketplace

Extension for Visual Studio Code - Icons for Visual Studio Code

marketplace.visualstudio.com

 

그리고 현재 설정값

{
	"editor.wordWrap": "on",
	"editor.fontFamily": "d2coding,verdana",
	"editor.mouseWheelZoom": true,
	"editor.lineNumbers": "on",
	"editor.minimap.enabled": false,
	"powermode.enabled": true,
	"powermode.maxExplosions": 60,
	"powermode.explosionSize": 16,
	"editor.colorDecorators": true,
	"editor.codeLens": false,
	"powermode.backgroundMode": "image",
	"powermode.enableShake": false,
	"liveServer.settings.donotShowInfoMsg": true,
	"workbench.iconTheme": "vscode-icons",
	"vsicons.dontShowNewVersionMessage": true,
	"liveServer.settings.CustomBrowser": "chrome",
	"liveServer.settings.donotVerifyTags": true,
	"fontAwesomeAutocomplete.triggerWord": "fa-",
	"editor.tabSize": 4,
	"prettier.tabWidth": 4,
	"prettier.useTabs": true,
	"[html]": {
		"editor.defaultFormatter": "vscode.html-language-features"
	},
	"[javascript]": {
		"editor.defaultFormatter": "vscode.typescript-language-features"
	},
	"[json]": {
		"editor.defaultFormatter": "vscode.json-language-features"
	},
	"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
	"[dart]": {
		"editor.formatOnSave": true,
		"editor.formatOnType": true,
		"editor.rulers": [80],
		"editor.selectionHighlight": false,
		"editor.suggest.snippetsPreventQuickSuggestions": false,
		"editor.suggestSelection": "first",
		"editor.tabCompletion": "onlySnippets",
		"editor.wordBasedSuggestions": false
	},
	"editor.suggestSelection": "first",
	"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
	"files.exclude": {
		"**/.classpath": true,
		"**/.project": true,
		"**/.settings": true,
		"**/.factorypath": true
	},
	"java.jdt.ls.java.home": "C:\\Program Files\\Java\\jdk-11.0.10",
	"java.configuration.runtimes": [
		{
			"name": "JavaSE-11",
			"path": "C:\\Program Files\\Java\\jdk-11.0.10",
			"default": true
		},
		{
			"name": "JavaSE-1.7",
			"path": "C:\\Program Files\\Java\\jdk1.7.0_80"
		},
		{
			"name": "JavaSE-1.8",
			"path": "C:\\Program Files\\Java\\jdk1.8.0_202"
		}
	],
	"redhat.telemetry.enabled": true,
	"workbench.colorTheme": "Default Dark+",
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.formatOnSave": true
}
반응형