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:

    • [x] 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:

    • [x] 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:

    • [x] 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