VSCode settings 2019

globalsnippets.code-snippets

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"Print to console": {
		"prefix": [
			"console",
		],
		"body": [
			"console.log($1);"
		],
		"description": "Log output to console"
	}
}

javascript.json

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"Three Full Init": {
		"prefix": "tfi",
		"body": [
			"import * as THREE from 'three';",
			"",
			"/* Global Variables */",
			"let container = document.querySelector('#scene-container');",
			"let scene = new THREE.Scene();",
			"let camera = new THREE.PerspectiveCamera(35, container.clientWidth / container.clientHeight, 0.1, 100);",
			"let renderer = new THREE.WebGLRenderer({ antialias: true });",
			"",
			"let mesh;",
			"",
			"/* Init Function */",
			"const init = () => {",
			"    scene.background = new THREE.Color(0x000000);",
			"",
			"    createCamera();",
			"    createLights();",
			"    createMeshes();",
			"    createRenderer();",
			"",
			"    container.appendChild(renderer.domElement);",
			"",
			"    renderer.setAnimationLoop(() => {",
			"        update();",
			"        render();",
			"    })",
			"}",
			"",
			"/* Main Functions */",
			"const createCamera = () => {",
			"    camera.position.set(0, 0, 10);",
			"}",
			"",
			"const createLights = () => {",
			"    const light = new THREE.DirectionalLight(0xffffff, 5);",
			"    light.position.set(10, 10, 10);",
			"",
			"    scene.add(light);",
			"}",
			"",
			"const createMeshes = () => {",
			"    const geometry = new THREE.BoxBufferGeometry(1.5, 1.5, 1.5);",
			"    const material = new THREE.MeshStandardMaterial({",
			"        color: 0x800000",
			"    })",
			"    mesh = new THREE.Mesh(geometry, material);",
			"",
			"    scene.add(mesh);",
			"}",
			"",
			"const createRenderer = () => {",
			"    renderer.setSize(container.clientWidth, container.clientHeight);",
			"    renderer.setPixelRatio(window.devicePixelRatio);",
			"}",
			"",
			"const update = () => {",
			"    ${1}",
			"}",
			"",
			"const render = () => {",
			"    renderer.render(scene, camera);",
			"}",
			"",
			"/* Event Listeners */",
			"const onWindowResize = () => {",
			"    camera.aspect = container.clientWidth / container.clientHeight;",
			"    camera.updateProjectionMatrix();",
			"    renderer.setSize(container.clientWidth, container.clientHeight);",
			"}",
			"",
			"window.addEventListener('resize', onWindowResize);",
			"",
			"/* Let the magic begin */",
			"init();",
			"",
		],
		"description": "Threejs full initialisation"
	},
	
	"Three Basic Init": {
		"prefix": "tbi",
		"body": [
			"import {",
			"    Scene, Color, PerspectiveCamera,",
			"    BoxBufferGeometry, MeshBasicMaterial, Mesh,",
			"    WebGLRenderer",
			"} from 'three';",
			"",
			"// Get a reference to the container element that will hold our scene",
			"const container = document.querySelector('#scene-container');",
			"",
			"// Create a Scene",
			"const scene = new Scene();",
			"",
			"// Set the background color",
			"scene.background = new Color('black');",
			"",
			"// Create a Camera",
			"const fov = 35; // AKA Field of View",
			"const aspect = container.clientWidth / container.clientHeight;",
			"const near = 0.1; // the near clipping plane",
			"const far = 100; // the far clipping plane",
			"",
			"const camera = new PerspectiveCamera(fov, aspect, near, far);",
			"",
			"// We'll move the camera back a bit so that we can view the scene",
			"camera.position.set(0, 0, 10);",
			"",
			"// Create a geometry",
			"const geometry = new BoxBufferGeometry(2, 2, 2);",
			"",
			"// Create a default (white) Basic material",
			"const material = new MeshBasicMaterial();",
			"",
			"// Create a Mesh containing the geometry and material",
			"const mesh = new Mesh(geometry, material);",
			"",
			"// Add the mesh to the scene",
			"scene.add(mesh);",
			"",
			"// Create the renderer",
			"const renderer = new WebGLRenderer();",
			"",
			"renderer.setSize(container.clientWidth, container.clientHeight);",
			"renderer.setPixelRatio(window.devicePixelRatio);",
			"",
			"// Add the automatically created <canvas> element to the page",
			"container.appendChild(renderer.domElement);",
			"",
			"// Render, or 'create a still image', of the scene",
			"renderer.render(scene, camera);",
		],
		"description": "Threejs basic initialisation"
	},


	"React Native Component": {
		"prefix": "rnc",
		"body": [
			"import React from 'react';",
			"import { Text, View, StyleSheet } from 'react-native';",
			"",
			"export default class ${1:NewComponent} extends React.Component {",
			"    render() {",
			"        return (",
			"            <View style={styles.container}>",
			"                <Text>",
			"                    ${2:Hello ${1}}",
			"                </Text>",
			"            </View>",
			"        );",
			"    }",
			"}",
			"",
			"const styles = StyleSheet.create({",
			"    container: {",
			"",
			"    },",
			"});",
			"",
		]
	},
	"React Native Functional Component": {
		"prefix": "rnfc",
		"body": [
			"import React from 'react';",
			"import { Text, View, StyleSheet } from 'react-native';",
			"",
			"export const ${1:NewComponent} = () => {",
			"        return (",
			"            <View style={styles.container}>",
			"                <Text>",
			"                    ${2:Hello ${1}}",
			"                </Text>",
			"            </View>",
			"        );",
			"    }",
			"",
			"const styles = StyleSheet.create({",
			"    container: {",
			"        flex: 1,",
			"    },",
			"});",
		]
	}
}

keybindings.json

// Place your key bindings in this file to override the defaultsauto[]
[
    {
        "key": "ctrl+d",
        "command": "-editor.action.addSelectionToNextFindMatch",
        "when": "editorFocus"
    },
    {
        "key": "ctrl+d",
        "command": "editor.action.copyLinesDownAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+shift+alt+down",
        "command": "-editor.action.copyLinesDownAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+shift+y",
        "command": "-workbench.debug.action.toggleRepl"
    },
    {
        "key": "ctrl+shift+y",
        "command": "redo",
        "when": "textInputFocus && !editorReadonly"
    },
    {
        "key": "ctrl+y",
        "command": "-redo",
        "when": "textInputFocus && !editorReadonly"
    },
    {
        "key": "ctrl+y",
        "command": "editor.action.deleteLines",
        "when": "textInputFocus && !editorReadonly"
    },
    {
        "key": "ctrl+shift+k",
        "command": "-editor.action.deleteLines",
        "when": "textInputFocus && !editorReadonly"
    },
    {
        "key": "ctrl+alt+l",
        "command": "eslint.executeAutofix",
        "when": "textInputFocus && !editorReadonly"
    },
    {
        "key": "ctrl+shift+i",
        "command": "-workbench.action.toggleDevTools",
        "when": "isDevelopment"
    }
]

typescriptreact.json

{
	// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"React Native Component": {
		"prefix": "rnc",
		"body": [
			"import React from 'react';",
			"import { Text, View, StyleSheet } from 'react-native';",
			"",
			"",
			"interface I${1:NewComponent}Props {",
			"    ",
			"}",
			"",
			"export default class ${1:NewComponent} extends React.Component<I${1:NewComponent}Props> {",
			"    render() {",
			"        return (",
			"            <View style={styles.container}>",
			"                <Text>",
			"                    ${2:Hello ${1}}",
			"                </Text>",
			"            </View>",
			"        );",
			"    }",
			"}",
			"",
			"const styles = StyleSheet.create({",
			"    container: {",
			"",
			"    },",
			"});",
			"",
		]
	},
	"React Native Functional Component": {
		"prefix": "rnfc",
		"body": [
			"import React from 'react';",
			"import { View, Text, StyleSheet } from 'react-native';",
			"",
			"",
			"interface I${1:NewComponent}Props {",
			"",
			"}",
			"",
			"export default (props: I${1:NewComponent}Props) => {",
			"    return (",
			"        <View style={styles.container}>",
			"            <Text>${2:Hello ${1}}</Text>",
			"        </View>",
			"    )",
			"}",
			"",
			"const styles = StyleSheet.create({",
			"    container: {",
			"        flex: 1,",
			"    }",
			"})",
			"",
		]
	},
	"React Functional Component": {
		"prefix": "rfc",
		"body": [
			"import React from 'react';",
			"",
			"interface I${1:NewComponent}Props {",
			"",
			"}",
			"",
			"export default (props: I${1:NewComponent}Props) => {",
			"    return (",
			"        <div>",
			"            <div>${2:Hello ${1}}</div>",
			"        </div>",
			"    )",
			"}",
			""
		]
	}
}

VSCodeSettings

Bracket pair colorizer
Path intellisense
Vetur
(vuetify)