Giter Club home page Giter Club logo

comment-divider's Introduction

Comment Divider

Comment Divider

This is Visual Studio Code extension, which provides commands for generating comment-wrapped separators from line content.

Supports all common languages.

Install

https://marketplace.visualstudio.com/items?itemName=stackbreak.comment-divider

Demo

Subheader Demo

Commands

Make main header

  • Default Shortcut:

    Shift + Alt + X

  • Default Style:

    /* -------------------------------------------------------------------------- */
    /*                                Example text                                */
    /* -------------------------------------------------------------------------- */
    

Make subheader

  • Default Shortcut:

    Alt + X

  • Default Style:

    /* ------------------------------ Example text ------------------------------ */
    

Insert solid line

  • Default Shortcut:

    Alt + Y

  • Default Style:

    /* -------------------------------------------------------------------------- */
    

Language Support

Extension uses relevant comment characters for all common languages.

For example, in python files subheader looks like

# ------------------------------ python example ------------------------------ #

or in html files

<!-- ---------------------------- html example ----------------------------- -->

Also, you can easily add support for any missing language or override the default preset.

Default Configuration

Common

  // Set line length for all dividers.
  "comment-divider.length": 80,
  // Set whether the divider will be shrink consider indent size, or will be always fixed length.
  "comment-divider.shouldLengthIncludeIndent": false,
  • if shouldLengthIncludeIndent: false

    /* --------------------------------- indent0 -------------------------------- */
    
        /* --------------------------------- indent1 -------------------------------- */
    
            /* --------------------------------- indent2 -------------------------------- */
  • if shouldLengthIncludeIndent: true

    /* --------------------------------- indent0 -------------------------------- */
    
        /* ------------------------------- indent1 ------------------------------ */
    
            /* ----------------------------- indent2 ---------------------------- */

Main Header

  // "Set symbol for main header line filling (only one).
  "comment-divider.mainHeaderFiller": "-",

  // Set main header vertical style.
  "comment-divider.mainHeaderHeight": "block",

  // Set main header text align.
  "comment-divider.mainHeaderAlign": "center",

  // Set main header text transform style.
  "comment-divider.mainHeaderTransform": "none",

Subheader

  // "Set symbol for subheader line filling (only one).
  "comment-divider.subheaderFiller": "-",

  // Set subheader vertical style.
  "comment-divider.subheaderHeight": "line",

  // Set subheader text align.
  "comment-divider.subheaderAlign": "center",

  // Set subheader text transform style.
  "comment-divider.subheaderTransform": "none",

Solid Line

  // Set symbol for solid line filling.
  "comment-divider.lineFiller": "-",

Languages Configuration

If some language is not supported out of the box, or you want to change default comment characters for an already supported language, it is possible to do it in the settings.

"comment-divider.languagesMap": {
      "toml": ["#", "#"],
      "scss": ["//"]
}

The item name is the language mode name and is associated with an array of 1 or 2 elements. The first element is the start of the line. The second, if defined, is the end.

The example above defines the right characters for toml and overrides scss defaults. As a result, the subheaders for these languages look like this:

# ------------------------------ toml subheader ------------------------------ #
// ----------------------------- scss subheader --------------------------------

Issues

Request features and report bugs using GitHub.

comment-divider's People

Contributors

alryaz avatar bayramkzk avatar dependabot[bot] avatar infeeeee avatar mrvkino avatar stackbreak avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

comment-divider's Issues

[REQUEST] Marker

In VS Code, the functionality for displaying markers in the minimap is implemented.
It would be nice to have a switch in the settings that would allow the MARK tag to be automatically inserted into the header comment.

Example:

/* -------------------------------------------------------------------------- */
/* MARK:                          Example text                                */
/* -------------------------------------------------------------------------- */

Use `//` at the beginning and ending for C++ and C.

The default comment style for C++ is:

/* -------------------------------------------------------------------------- */
/*                                 Main Header                                */
/* -------------------------------------------------------------------------- */

Is it possible to use:

// -------------------------------------------------------------------------- //
//                                 Main Header                                //
// -------------------------------------------------------------------------- //

or

/* --------------------------------------------------------------------------
                                   Main Header
-------------------------------------------------------------------------- */

[REQUEST] Liquid file support

I tried adding this to the settings.json file, but it's not working:
"comment-divider.languagesMap": { "liquid": ["{%- comment -%}", "{%- endcomment -%}"] }

Liquid files are commented with {%- comment -%} and {%- endcomment -%}

Subheader settings: Names of keys in documentation and implementation differ (subheader vs. subHeader)

Preliminary note

<3 the extension.
Also, the source reads well.

Here's the bug

The 4 options pertaining to the subheader are documented in the README (and hence by proxy also in the in-app manual) as if "subheader" were two words. Here, the options are called subHeader<OptionName>, whereas the actual implementation is treating it as one word while parsing (i.e.looking for keys named subheader<OptionName>).

[Request] Support different sizes (levels) at the same time

I know we can set the line length for all dividers through the config, what I need is multiple lengths of divider at the same time, which doesn't seem to be possible at the moment, but this feature is very useful isn't it?

Another extension support this feature, but it has other drawbacks, it does not keep the length consistent.

`languagesMap` not applied when used as `Workspace` setting

Hi,

I have noticed recently that the extension is not working when comment-divider.languagesMap is used as Workspace setting.

Here an example of setting to reproduce the bug:

  "comment-divider.languagesMap": {
    "scss": ["//"]
  },

If I use comment-divider.languagesMap as User or Remote setting, the right comment character is used.

Extension version: v0.4.0

VSCode information:
Version: 1.62.3
Commit: ccbaa2d27e38e5afa3e5c21c1c7bef4657064247
Date: 2021-11-17T08:00:36.721Z
Electron: 13.5.2
Chrome: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Linux x64 5.4.0-91-generic snap

[Request] Vue template support

would be great to see .vue file support like
1). "" for template section
2) "//" for script section
3) / */ for style section
test

Alt +X can not be used.

ALT+X can not be used ,when typed ,the warning "Running the contributed command: 'extension.add_chaos' failed." occurs in the lower-left corner of the vscode, help.

Add another divider level

Today, "main" and "divider" are defined. I use a slightly deeper divider structure.

/* =======================
ALL CAPS
/* ======================= */

/* ---------------------------------------
Title Case
/* --------------------------------------- */

/* --------------- Title Case ------------ */

I can almost do this today, but I can't do the middle one because only one "main" style can be defined at a time.

Accomplishing this scheme also means a setting for each level indicating case conversion (ie, all caps, title case, unchanged). Title case isn't terribly important, but I'd need the option for a main-style header to not convert to all caps.

Improve documentation on "Languages Configuration"

From the documentation of the Languages Configuration it does not become apparent how one would find the correct language ID, to change the style for a specific language / file type.

Maybe you could point to the respective VSC Language ID documentation, from which one can infer to press CTRL + K M (Change Language Mode) to list all languages.

I think this would be helpful.

[Request] Visual Studio Support

Thank you for providing such a useful tool.

Do you have any plans to make this plug-in support visual studio??

I can't find a plug-in with similar functionality on visual studio

Comment starts with a specific character

I am using commend-divider with Better Comments (to sometimes put, e.g., * to highlight the comment).

What I want is to automatically make

# *************************************************************************** #
# *                             MINMAX CLIPPING                             * #
# *************************************************************************** #

which will automatically be highlighted.

IMHO, an addition of the feature such as

"comment-divider.mainHeaderStarter": "*",
"comment-divider.mainHeaderEnder": "*",

can be useful. How do you think...?

Add feature for indented code

It'd be nice if the tool could recognize two things:

  1. Language-specific horizontal ruler-extension limits defined in the settings.json - file:
"[python]": {
        "editor.rulers": [
            80,
            120
        ]
    }
  1. Indentation according to current code:
    Instead of heaving to tab it over and then accept that the ruler exceeds the vertical limits like so ...
# ------------------------------- Some function ------------------------------ #
def func():

    # ------------------------------- Sub-function ------------------------------- #
    def sub_func():
        pass

... it'd be awesome of the extension calculated automatically the difference between the indentation and the vertical right limit, which would lead to following result:

# ------------------------------- Some function ------------------------------ #
def func():

    # ----------------------------- Sub-function ----------------------------- #
    def sub_func():
        pass

[Request] Add option to use double slash (//) for Less/Scss/Sass preprocessor comments

First, I'd like to thank you for this fantastic plugin. It's little things like this that make coding so much easier and leave me with less to worry about.

It's a humble request, but I would love to be able to use the // comment indicator instead of the comment lines being wrapped in /*...*/.

For example, instead of:

/* Example ------------------------------------------------------------------ */

I would like to be able to change it to:

// Example --------------------------------------------------------------------

I know it's minor, but I never write vanilla CSS so I've become quite attached to my slashes. πŸ˜…

Cheers, and thank you again!

typescript

is it possible to use opt + x subHeader in tsx or react ? I have tried to modify it on JSON setting but it's not working.
comment-divider.languagesMap": {
".tsx": ["{/", "/}"],
".jsx":["{/", "/}"],
".typescript": ["{/", "/}"],
".js": ["{/", "/}"],
".react": ["{/", "/}"],
".javascript": ["{/", "/}"],
".javaScript": ["{/", "/}"],
".html": ["{/", "/}"],
"toml": ["#", "#"],
"scss": ["//"]
},
thank you

Need Svelte file support!

This is a good, clean and convenient extension, but it seems doesn't support .svelte file yet.
// doesn't work
/* doesn't work neither */
<!-- THIS WORKS -->

It'll be great if you can fix this in the next release. Thanks a lot!

Allow customization of final character to fix R breadcrumbs

In R files, the presence of a hash symbol at the end of the section line prevents it from showing up on the VSC breadcrumbs row:

bilde

Removing it makes the section render correctly

bilde

I've tried a similar approach on different languages (HTML, Python, C++). In these cases, I couldn't even get the section to appear on the breadcrumb at all (and that may be a topic for a different discussion), but at least for R that's the deal.

I can also understand that hard-coding a different final character might break the extension for other languages, so perhaps the safest option here is to allow the user to custimoze the final character, either in general or, ideally, on a per-language basis.

shouldLengthIncludeIndent only works for space indentation

When using tabs for indentation, setting "comment-divider.shouldLengthIncludeIndent": false doesn't properly respect the length defined by comment-divider.length. In my tests, the overflow varies from 1 extra character (when tab =< 4 spaces) to 3 extra characters (when tab = 4 spaces).

Indent issue

OS: Microsoft Windows [Version 10.0.18363.476]
VS code version: 1.40.2
Extension version: 0.2.1

When I type a text with indent like this.
image

After using Alt + X Indent is gone.
image

Add an option for a comment banner that follow indent level

Hi, could it be possible to request the banner to start at the indent level of the code but end at the same column width?

Thanks

/* -------------------------------------------------------------------------- */
/*                              Actual behaviour                              */
/* -------------------------------------------------------------------------- */
    code being indented
    /* ---------------------------------------------------------------------- */
    /*                         New Optional Behaviour                         */
    /* ---------------------------------------------------------------------- */

Add instructions on how to edit extension advance settings in description.

Please add simple instructions on how to edit the default confirguation! I am fairly new to VS Code. I've spent a lot of time trying to find out how to do it. I suspect there is file somewhere to edit, but unable to locate even after searching online. There seems to be no easy way to access the file in VSCode.

Chinese / Japanese Comment Support

This is a great extension, and it works well with English comments.
But with Chinese or Japanese, I press Shift + Alt + X and find that the second line is not aligned
image

This is the test sentences: δΈ­ζ–‡ζ΅‹θ―•.

Document transform options

The configuration docs say that you can set a "text transform style" for the headers (eg comment-divider.mainHeaderTransform) but they don't explain what that means or what the options are. (From transforms.ts it looks like the options are lowercase, uppercase, titlecase, and none, but it'd be nice for them to be listed and explained in the README.)

This is probably a good #firstIssue for someone πŸ˜„

Thanks for an awesome extension!

[Request] Support different comment-divider.length for different language

An option comment-divider.languagesLengthMap should precise the line length for a particular language:

"comment-divider.languagesLengthMap": {
      "toml": 80,
      "scss": 120
}

This option should have the priority over the comment-divider.length option.
If a language is not present in the new option comment-divider.languagesLengthMap, then the default given by comment-divider.length is applied.

Comment Divider: Line contains comment characters!

I am getting:
Comment Divider: Line contains comment characters!
and I want to surpass that configuration, how could I config that? I combine 'comment divider' with 'better comments' extension and I want to be able to create the dividers from comments, currently I do it manually when I get the error.
Like this:
image

left/right align for "line"

The align from the below settings do not work.

"comment-divider.subHeaderFiller": "-",
"comment-divider.subHeaderHeight": "line",
"comment-divider.subHeaderTransform": "none",
"comment-divider.subHeaderAlign": "left",

It gives

# --------------------------------- comment --------------------------------- #

in python, where I expected

# comment ------------------------------------------------------------------- #

Is this an intended behavior?

[Request] Seamless comment dividers

Currently the comment dividers look like this:
# ################################## Example ################################# #

I was wondering if there could be a setting e.g. comment-divider.seamless that would make the comments remove the whitespaces just after the start and just before the end of the string e.g.:
#################################### Example ###################################

Cheers

incorrect comment style when commenting in js <script> in html page

I guess extension comment style depends on page extension. So, when I comment some js code which is included in the html page, the extension gives the html style comment which is wrong.

index.html

<script>
<!-- ---------------------------- example line ----------------------------- -->
function hello(){
}
</script>

However, VSCode is commenting fine so see if that can help.

[REQ] undo comment

Would be nice when selected a comment block and pressed ALT+SHIFT+X it would convert it into original text

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.