В Sublime Text многострочные фрагменты кода могут быть определены с помощью пробелов в файле фрагмента.
Но, насколько я знаю, VS-Code нужен JSON. Они требуют либо:
\nЭто неудобно по сравнению с подходами WYSIWYG, которые другие IDE предоставляют по умолчанию.
Существуют ли лучшие способы определения длинных блоков кода?
Вы можете определить тело своего фрагмента как массив строк, каждая из которых начинается с новой строки.
Как это:
"Create for loop":{
"prefix": "mkfor",
"body":[
"for(int i = 0; i < 3; i++)",
"{",
" //code goes here",
"}"
],
"description": "Creates a for loop"
}
или, если вы установите расширение Easy Snippet Maker, вы можете создавать свои фрагменты, выделяя тексты.
Вы можете проверить это видео для быстрого краткого руководства
Перейдите в раздел Файл --> Настройки --> Пользовательские фрагменты. Выберите предпочитаемый язык.
Теперь введите следующий код, чтобы создать фрагмент цикла for:
"Create for loop":{
"prefix": "for",
"body":[
"for(int i = 0; i < 10; i++)",
"{",
" //code goes here",
"}"
],
"description": "Creates a for loop"
}
Готово.
Введите for в редакторе и используйте первый прогноз.
СОКРАЩЕНИЕ --
Надеюсь, это поможет :)
Примечание: перейдите в меню «Файл» -> «Настройки» -> «Пользовательские фрагменты». Затем выберите язык, на котором вы
создали фрагмент. Там вы найдете фрагмент.
Я также не могу найти хороший способ создания многострочных фрагментов. Вероятно, это одна из функций, которую я хотел бы улучшить больше всего. Как было предложено в другом ответе, есть несколько расширений, помогающих в создании сниппетов (например, это и это). Тем не менее, они не избегают буквальных знаков доллара, а отступы невелики.
Просматривая ответы на этот вопрос, я наткнулся на Pen Дениса Малиночкина (ссылка на эта проблема). Однако он также не экранировал знаки доллара должным образом, поэтому я разветвил его и добавил эту строку для обработки буквальных знаков доллара. Вот оно: https://codepen.io/cbejensen/pen/WXLxaE< /сильный>
Надеюсь, это поможет!
P.S. - Это строка, которую я добавил:
line = line.replace(new RegExp(/\$/, 'g'), '\\$');
$1 , $2 и т. д., чтобы установить курсор после активации фрагмента.
- person antoine; 19.09.2018
Нажмите cmd+shift+p на компьютере Mac и найдите «Настроить пользовательские фрагменты», затем создайте файл и вставьте ниже код json. укажите префикс, тело и описание. Ссылка: https://code.visualstudio.com/docs/editor/userdefinedsnippets
{
"forLoop": {
"prefix": "forLoop",
"body": [
"for (const ${2:element} of ${1:array}) {",
"\t$0",
"}"
],
"description": "For Loop"
},
"reactClass": {
"prefix": "reactClass",
"body": [
"import React from 'react';",
"class ${1:ComponentName} extends React.Component {",
"\t$0constructor(props) {",
"\t$0\t$0super(props)",
"",
"render() {",
"return (<div> ${2:Component} </div>)",
"}",
"export default ${3:ComponentName}"
],
"description": "For React Component class"
},
"function": {
"scope": "javascript,typescript",
"prefix": "function",
"body": [
"import React from 'react';",
"import withStyles from '@material-ui/core/styles/withStyles';",
"import { makeStyles } from '@material-ui/core/styles';",
"",
"import Styles from './style.js';",
"",
"const useStyles = makeStyles(Styles);",
"",
"function $1(props){",
"const classes = useStyles();",
"\treturn (",
"\t\t<React.Fragment>",
"\t\t\t<div className={classes.root}>",
"\t\t\t\t$1",
"\t\t\t</div>",
"\t\t</React.Fragment>",
"\t)",
"}",
"export default withStyles(useStyles)($1);"
],
"description": "react class"
}
}
Я написал скрипт, который вы можете создавать свои собственные сложные фрагменты. просто используя файл, который вы хотите. поэтому вам не нужно писать исходный код в виде строки или массива строк. https://github.com/banxi1988/vscode-snippets-ext-template
