Sublime 3 Snippets

Sublime.md

Sublime

Rensa gamla inställningar

Ta bort alla inställningar, paket och liknande som tillhör Sublime:

$ cd ~/Library/Application\ Support/ && open .

Leta upp "Sublime Text 3" och ta bort hela mappen.

Tema

Installera Materialize via Package Control. ⇧⌘P och sök på ”Activate Materialize Theme”. Starta om Sublime efteråt

Paket

Installera Package Control först, och sen följande paket:

• GitGutter
• BracketHighlighter
• All Autocomplete
• Babel
• Svelte
• TypeScript
• Emmet
  • Starta om Sublime efter installation
  • Autocompletar om du prefixar med ”<”, dvs ”<div” + TAB ⇥. Läs mer om hur det funkar här.
• JsPrettier
  • Starta om Sublime efter installation
  • Du kan hitta alla defaults under ⇧⌘P > "Preferences: JsPrettier Settings - Default".
  • Min config:

   {
   	"debug": false,
   	"prettier_cli_path": "",
   	"node_path": "",
   	"auto_format_on_save": true,
   	"auto_format_on_save_excludes": [
   		"*/node_modules/*"
   	],
   	"auto_format_on_save_requires_prettier_config": true,
   	"allow_inline_formatting": false,
   	"custom_file_extensions": ["svelte"],
   	"max_file_size_limit": -1,
   	"disable_tab_width_auto_detection": true,
   	"additional_cli_args": {}
   }

Snippets

Snippets måste (och borde) alltid sparas under ett paket. Det rekommenderade paketet att spara egna snippets under är User, som alltid finns i Sublime. Du hittar paketet under ~/Library/Application Support/Sublime Text 3/Packages/User. Spara filer där med ändelsen .sublime-snippet.

Skapa en snippet

$ cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/
$ touch x.sublime-snippet
$ sublime .

Template

<snippet>
<content><![CDATA[Type your snippet here]]></content>
<!-- Optional: Tab trigger to activate the snippet -->
<tabTrigger>xyzzy</tabTrigger>
<!-- Optional: Scope the tab trigger will be active in -->
<scope>source.python</scope>
<!-- Optional: Description to show in the menu -->
<description>My Fancy Snippet</description>
</snippet>

React

rfc.sublime-snippet

Create a React functional component

<snippet>
<content><![CDATA[
import React from 'react'

const Component = () => {
	return <div></div>
}

export default Component
]]></content>
<tabTrigger>rfc</tabTrigger>
<description>Create a React functional component</description>
</snippet>

rfcp.sublime-snippet

Create a React functional component with prop-types

<snippet>
<content><![CDATA[
import React from 'react'
import PropTypes from 'prop-types'

const Component = ({ prop }) => {
	return <div></div>
}

Component.propTypes = {
	prop: PropTypes.string.isRequired,
}

export default Component
]]></content>
<tabTrigger>rfcp</tabTrigger>
<description>Create a React functional component with prop-types</description>
</snippet>

ue.sublime-snippet

Create a React useEffect hook

<snippet>
<content><![CDATA[useEffect(() => {

}, [])]]></content>
<tabTrigger>ue</tabTrigger>
<description>Create a React useEffect hook</description>
</snippet>

ue.sublime-snippet

Create a React useState hook

<snippet>
<content><![CDATA[const [state, set] = useState()]]></content>
<tabTrigger>us</tabTrigger>
<description>Create a React useState hook</description>
</snippet>

Regarding the useState snippet, here's an alternative version that let's you directly type the state name and auto capitalises the setter name:

<snippet>
<content><![CDATA[const [$1, set${1/^(.)(.*)$/\u\1\2/}] = useState($2);]]></content>
<tabTrigger>useState</tabTrigger>
<scope>source.js, source.jsx, source.ts, source.tsx</scope>
<description>useState</description>
</snippet>

Maybe it helps anybody :)

@maxbeier Huh, didn't know anyone else knew about this gist! I made it for my personal use, but glad you found it helpful (if you did)! Out of curiousity, how did you find it?

It was one of the first Google search results for "sublime react usestate snippets" – I was searching for the thing I posted in the end (but couldn't find anything). And yes, I found it helpful, thanks :)