initial commit with extensions, settings, and snippets

README.md

@@ -1 +1,46 @@
-# team-dang-productivity
+# team-dang-productivity
+
+A little repo with some handy productivity saving configuration and tools for working on Lob's Vue repos.
+
+## Editor
+[VSCode](https://code.visualstudio.com/) is my personal IDE of choice. This repo assumes that you are using that IDE. If you're not, that's cool! All IDEs are welcome, I just know VSCode best and can offer tips and tricks for it 🤗
+
+## Extensions
+### General
+- [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur): Vue tooling for VS Code.
+- [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2): This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.
+- [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock): Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.
+- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag): Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
+
+### Testing
+- [Switch to test](https://marketplace.visualstudio.com/items?itemName=eskimoblood.create-test): This extension will open the coresponding test file for the opened source file. If the file not exists, it will create a new one.
+### Linting
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): Integrates ESLint into VS Code.
+
+### Settings
+Please see [settings.json](settings.json) for info on how to configure these extensions for productivity.
+
+- Auto save files when you blur or navigate away from them
+- Custom colors for matching brackets, parentheses, etc (choose your own colors!)
+- Lint and autoformat files on save (this is the bulk of the settings in this file)
+- Auto create *.spec.js files in the correct location when you use the `createTest` command (Cmd + Shift + P > Create test or you can set up a custom keyboard shortcut)
+
+## Snippets
+[Code snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets) are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.
+
+To add new snippets, go to Code > Preferences > User snippets and then choose the language and file type you want this snippet available in.
+
+Below you'll find my most used snippets for DANG projects.
+
+### Vue
+- [Component](vue-component-snippet.json): boilerplate for a Vue component that is available when you start typing `component` 
+- [Spec](vue-spec-snippet.json): boilerplate for a spec file for a Vue component that is available when you start typing `spec`
+- [Story](vue-story-snippet.json): boilerplat for a Storybook story for a Vue component that is available when you start typing `story`
+### Javascript
+- [Debugging](debugging-snippets.json) snippets
+  - `db` will get you a `debugger` statement
+  - `log` will get you a console log with your cursor ready to start typing your label and output
+- [Jest](jest-snippets.json) snippets
+  - `describe` will get you a jest describe block with your cursor ready to start typing your `it` blocks
+  - `it` will get you a jest it block with your cursor ready to start typing your assertions
+  - `before` will get you a jest beforeEach block with your cursor ready to start typing your setup code

debugging-snippets.json

@@ -0,0 +1,16 @@
+{
+  "debugger": {
+    "prefix": "db",
+    "body": [
+      "debugger"
+    ],
+    "description": "debugger"
+  },
+  "Print to console": {
+    "prefix": "log",
+    "body": [
+      "console.log('$1:', ${2:${1:loggedValue}})"
+    ],
+    "description": "Log output to console"
+  }
+}

jest-snippets.json

@@ -0,0 +1,31 @@
+{
+  "test describe": {
+    "prefix": "describe(",
+    "body": [
+      "describe('$1', () => {",
+      "",
+      "$0",
+      "",
+      "})"
+    ],
+    "description": "jest describe block"
+  },
+  "test assertion (it)": {
+    "prefix": "it(",
+    "body": [
+      "it('$1', () => {",
+      "$0",
+      "})"
+    ],
+    "description": "jest it assertion"
+  },
+  "test before": {
+    "prefix": "before",
+    "body": [
+      "beforeEach(() => {",
+      "$0",
+      "})"
+    ],
+    "description": "jest beforeEach block"
+  }
+}

settings.json

@@ -0,0 +1,39 @@
+{
+  "files.autoSave": "onFocusChange",
+  "bracket-pair-colorizer-2.colors": [
+    "#1F2020",
+    "#B2811E",
+    "#CC727B"
+  ],
+  "javascript.validate.enable": true,
+  "editor.formatOnSave": true,
+  "editor.formatOnSaveTimeout": 5000,
+  "eslint.debug": true,
+  "eslint.format.enable": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "eslint.validate": [
+    "javascript"
+  ],
+  "[javascript]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[scss]": {
+    "editor.formatOnSave": true
+  },
+  "[css]": {
+    "editor.formatOnSave": true
+  },
+  "[html]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnSave": true
+  },
+  "createTest.testFileExtension": ".spec.js",
+  "createTest.testFolder": "./__tests__",
+  "createTest.srcFileExtension": ".vue"
+}

vue-component-snippet.json

@@ -0,0 +1,30 @@
+  {
+    "component": {
+      "prefix": "component",
+      "body": [
+        "<template>",
+        "",
+        "</template>",
+        "",
+        "<script>",
+        "export default {",
+        "\tname: '${TM_FILENAME_BASE}',",
+        "\tprops: {",
+        "\t\t$1",
+        "\t},",
+        "\tcomputed: {",
+        "\t\t$2",
+        "\t},",
+        "\tmethods: {",
+        "\t\t$3",
+        "\t}",
+        "}",
+        "</script>",
+        "",
+        "<style scoped lang=\"scss\">",
+        "",
+        "</style>"
+      ],
+      "description": "boilerplate for a Vue component"
+    }
+  }

vue-spec-snippet.json

@@ -0,0 +1,23 @@
+{
+  "vue test file": {
+    "prefix": "spec",
+    "body": [
+      "import '@testing-library/jest-dom';",
+      "import { render, fireEvent } from '@testing-library/vue';",
+      "import ${TM_FILENAME/(.*)\\.spec\\..+$/$1/} from '../${TM_FILENAME/(.*)\\.spec\\..+$/$1/}.vue';",
+      "",
+      "const initialProps = {",
+      "\t$1",
+      "};",
+      "",
+      "const renderComponent = (options) => render(${TM_FILENAME/(.*)\\.spec\\..+$/$1/}, { ...options });",
+      "",
+      "describe('${TM_FILENAME/(.*)\\.spec\\..+$/$1/}', () => {",
+      "",
+      "\t$0",
+      "",
+      "})"
+    ],
+    "description": "vue component test boilerplate"
+  }
+}

vue-story-snippet.json

@@ -0,0 +1,32 @@
+{
+  "story": {
+    "prefix": "story",
+    "body": [
+      "import ${TM_FILENAME/(.*)\\.stories\\..+$/$1/} from './${TM_FILENAME/(.*)\\.stories\\..+$/$1/}.vue';",
+      "//import mdx from './${TM_FILENAME/(.*)\\.stories\\..+$/$1/}.mdx';",
+      "",
+      "export default {",
+      "\ttitle: 'Components/${TM_FILENAME/(.*)\\.stories\\..+$/$1/}',",
+      "\tcomponent: ${TM_FILENAME/(.*)\\.stories\\..+$/$1/},",
+      "//\tparameters: {",
+      "//\t\tdocs: {",
+      "//\t\t\tpage: mdx",
+      "//\t\t}",
+      "//\t},",
+      "};",
+      "",
+      "const Template = (args, { argTypes }) => ({",
+      "\tprops: Object.keys(argTypes),",
+      "\tcomponents: {  ${TM_FILENAME/(.*)\\.stories\\..+$/$1/} },",
+      "\tsetup: () => ({ args }),",
+      "\ttemplate: '<${TM_FILENAME/([A-Z][a-z]*)([A-Z][a-z]*)*\\.stories\\..+$/${1:/downcase}${2:+-}${2:/downcase}/g} v-bind=\"args\"></${TM_FILENAME/([A-Z][a-z]*)([A-Z][a-z]*)*\\.stories\\..+$/${1:/downcase}${2:+-}${2:/downcase}/g}>'",
+      "});",
+      "",
+      "export const Primary = Template.bind({});",
+      "Primary.args = {",
+      "\t$1",
+      "}"
+    ],
+    "description": "Storybook for vue component boilerplate"
+  }
+}