Parallel Editor

---

An VSCode Extension for editing Vue SFC(Single-file Component), MFC(Multi-file Component) parts(tamplate/script/style) with multi columns layout, It’s layout looks like CodePen/JSFiddle/JSBin.

Issues

Any issues please send to here:

Features

1. Automatically open scripts, templates, style files of the same component in multipe columns;

2. Supported Vue SFC, Vue MFC, Angular MFC and other components with a specific structured files;

3. Supported a variety of built-in template, style, script extNames and you can extends it simply with VSCode Settings;

   • Scripts: .js, .jsx, .ts, .tsx, .mjs, .es, .es6, .coffee, .dart
   • Styles: .css, .scss, .sass, .less, .styl, .stylus
   • Templates: .html, .htm, .xhtml, .ejs, .jade, .pug, .hbs, .handlebars, .haml, .tpl, .mustache, .def, .dot, .jst, .dust, .njk

4. Automatically identifies the component's constituent files.

5. Support to adjust the columns order of scripts, templates, and style in VSCode Settings.

6. Automatically split VUE SFC (Single-file Component) blocks (like <template/>, <script/>, <style/>) into standalone temp file on editting, and merged back they are together on saved.

7. Supported to matching component’s part files in the same directory, also cross multiple directories.

---

How Parallel to matching the part files of components

1. Same named files will be treated as a set of files for the same component.

┣━ Components
  ├┈ index.ts
  ├┈ common.ts
  ├┈ ...
  ├┈ base-button.ts       ↘
  ├┈ base-button.scss     → BaseButtom component
  ├┈ base-button.html     ↗
  ├┈ ...
  ├┈ Tab.ts               ↘
  ├┈ tab.scss             → Tab component (Case insensitive)
  └┈ tab.html             ↗

1. In the folder only contains one script file, one style file and one template file will be treated as a component.

┣━ Components
  ├┈ index.ts
  └┈ Icon
    ├┈ index.ts     ↘
    ├┈ icon.html    → Icon component
    └┈ icon.scss    ↗
  └┈ Avatar
    ├┈ index.tsx    ↘
    └┈ style.scss   → Icon component (no standalone template file, includes in .tsx.)
  └┈ Foo
    └┈ ...
  └┈ Bar
    └┈ ...

1. Cross directories which you specficed by parallel.scriptFoldersForCrossMode, parallel.styleFoldersForCrossMode, parallel.templateFoldersForCrossMode with in VS Code Settings, The files which has the same file name (excludes extName) and a consistent relative path that relatived to the directories specified in the previous Settings are matched for a same component's part files.

┣━ App
  ├┈ app.coffee
  └┈ views                           ★ (`views` is specificed in Settings)
    └┈ product
      ├┈ product-list.pug     ▔╲
      ├┈ product-item.pug       ╲
      └┈ product-editor.pug      ╲     ▔╲
    └┈ user                       ╲      ╲
      ├┈ list.html                 ╲      ╲
      ├┈ item.html                   +-»...╲... Product List
      └┈ editor.html               ╱        ╲
  ├┈ ...                          ╱          +-»... Product Editor
  └┈ ctrls                       ╱          ╱   ★ (`ctrls` is specificed in Settings)
    └┈ product                  ╱          ╱
      ├┈ product-list.js     __╱          ╱
      ├┈ product-item.js                 ╱
      └┈ product-editor.js            __╱
    └┈ user
      ├┈ list.ts
      ├┈ item.ts
      └┈ editor.ts
  └┈ Foo
    └┈ ...
  └┈ Bar
    └┈ ...

1. SFC like *.vue files will splited into multi standalone script/style/template files on editing, and merge they are together after every standalone file saved automatically, Splited standalone files are storing in temp folder with named rules .vscodeparallel/components/${path_hash}/ under your project root.

┣━ App
  ├┈ main.ts
  ├┈ app.vue
  └┈ Components
    └┈ product
      ├┈ product-list.vue
      ├┈ product-item.vue
      └┈ product-editor.vue
    └┈ user
      ├┈ list.vue                 ↗  item.ts    ↘
      ├┈ item.vue   .....[open]...→  item.less  → ...[saved]...» item.vue
      └┈ editor.vue               ↘  item.html  ↗
  ├┈ store
  ├┈ router
  ├┈ directives
  ├┈ utils
  └┈ mixins

---

Settings

1. Open VSCode Settings, press ⌘ + , key on Mac and Ctrl + , will open User settings page.
2. Find Parallel Editor section or search for parallel prefix.

⚠️ NOTE: VS Code provided User Settings and Workspace Settings, User Settings will applyed to all Projects, but Workspace Settings only apply to current project

Parallel Editor Settings

- parallel.auto

• type: boolean
• default: true
• description: Wether enable auto open file with Parallel Space.

- parallel.componentFolders

• type: array
• default: ['component{s}', 'view{s}', 'page{s}']
• description: [Case insensitive] A set of folder-names or short-paths using for locate components.

- parallel.scriptFolders

• type: array
• default: ['script{s}', 'controller{s}', 'ctrl{s}', 'javascript{s}', 'typescript{s}', 'coffeescript{s}', ...scriptsExtnames]
• description: [Case insensitive] A set of folder-names or short-paths using for locate script files.

- parallel.styleFolders

• type: array
• default: ['style{s}', ...styleExtnames]
• description: [Case insensitive] A set of folder-names or short-paths using for locate style files.

- parallel.templateFolders

• type: array
• default: ['template{s}', 'tpl{s}', 'view{s}', 'page{s}', 'html{s}', ...tempalteExtNames]
• description: [Case insensitive] A set of folder-names or short-paths using for locate template files.

- parallel.scriptExtnames

• type: array
• default: []
• built-in: ['.js', '.jsx', '.ts', '.tsx', '.mjs', '.es', '.es6', '.coffee', '.dart']
• description: A set of extnames used for detect component's script file.

  Notes:

  • The extnames you setted will be merged into the built-ins and deduplicated.

  • if you want to exclude built-in script extnames, please use ! prefix symbol. For example:

    {
      // ...
      parallel.scriptExtnames: [
        '!.ts', // excluded built-in .ts extname
        '!.tsx', // excluded built-in .tsx extname
        '.component.ts', // includes
      ],
      // ...
    }

    matched results:

    • app.component.ts (matched)
    • app.module.ts
    • app.ts

- parallel.styleExtnames

• type: array

• default: []

• built-in: ['.css', '.scss', '.sass', '.less', '.styl', '.stylus' ]

• description: A set of extnames used for detect component's style file.

  Notes:

  • The extnames you setted will be merged into the built-ins and deduplicated.

  • if you want to exclude built-in style extnames, please use ! prefix symbol. For example:

    {
      // ...
      parallel.styleExtnames: [
        '!.sass', // excluded built-in .sass extname
        '.component.sass', // includes `*.component.sass`
      ],
      // ...
    }

    matched results:

    • app.component.sass (matched)
    • app.module.sass
    • app.sass

- parallel.templateExtnames

• type: array

• default: []

• built-in: ['.jade', '.pug', '.tpl', '.html', '.htm', '.xhtml', '.xml', '.mustache', '.ejs', '.def', '.dot', '.jst', '.handlebars', '.hbs', '.haml', '.dust', '.njk']

• description: A set of extnames used for detect component's template file.

  Notes:

  • The extnames you setted will be merged into the built-ins and deduplicated.

  • if you want to exclude built-in template extnames, please use ! prefix symbol. For example:

    {
      // ...
      parallel.templateExtnames: [
        '!.html', // excluded built-in .html extname
        '.component.html', // includes `*.component.html`
      ],
      // ...
    }

    matched results:

    • app.component.html (matched)
    • app.module.html
    • app.html

- parallel.columnsOrder

• type: array
• default: ['script', 'template', 'style']
• description: Set script, template, style panels layout order in the editor.

- parallel.splitSingleFileComponentOnEditing

• type: boolean
• default: true
• description: whether auto split templates/scripts/style tags in multiple columns view for a single-file component when open it.

- parallel.singleFileComponentExtnames

• type: array
• default: []
• built-in: ['.vue', '.we', '.weex']
• description: enable split mode for Single-file Component which with those file extnames.

---

Know Bugs