Visual Studio Code Tips and tricks

Discussion in 'Useful Development Tools' started by Jonforum, Dec 28, 2016.

  1. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,581
    Likes Received:
    1,360
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    sdrgsrgh.png

    Hello I have just discovered Visual Studio Code.
    I was on notepad ++ before.
    I open this post in order to discover a can this program with the community.

    • Know your configuration.

    • Yours recommended plugins .

    • Your tips that facilitates the work and hack on rmmv.

    • Shares print screen to get somes new ideas.

    • you custom syntaxe

    • Shortcut useful

    • Plugin configuration

    • more .....



    I want to know your configurations and the way you operate this program.


    I start, so I am interested to discover several approach and the way people use.


    Open to all information and discussion.
    Pleasure to read you all and share some tips.
     
    Last edited: Feb 16, 2017
    #1
  2. Sharm

    Sharm Pixel Tile Artist Veteran

    Messages:
    12,615
    Likes Received:
    10,300
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    I've moved this thread to Useful Development Tools. Please be sure to post your threads in the correct forum next time. Thank you.
     
    #2
  3. LTN Games

    LTN Games Veteran Veteran

    Messages:
    621
    Likes Received:
    475
    Location:
    Canada
    First Language:
    English
    Primarily Uses:
    RMMV
    I've used Sublime Text, Brackets, Atom, and even Webstorm and so far for the month or so I've been using VSCode, I've grown to love it. It's awesome it has, IntelliSense,  task runner, and debugger, as well as git. The best part it's all built into it, no need for extensions to do all the above.


    The first extension I got was ESLint, I enjoy the amount of rules available with them and ESLint works with plugins and shareable configs, which is helpful when you want to follow a standard style in all your projects. I've recently adopted JS Standard style, which is not much different than what I was currently doing, the only difference being semi-colons, I used to always use semi-colons, it was tough at first but not only does it look cleaner it reads easier, anyways blah blah enough about the style.


    I always setup a git as well, I've done this before VSCode but it's wise to get used to it, set up a workflow and do it for every project. You don't have to do it with every plugin you make, I just hook into my MV project directory and that is where I initialize my git repository. Obviously, you may not want it public, I know I did not, I do a lot of random stuff that I did not want everyone to see as a public repository so instead of using GitHub which is paid, I found https://about.gitlab.com/ which has everything GitHub has and it's free.  


    How do you setup git in VSCode? Just open your project folder in VSCode and click the git tab on the left and click Initialize Repository. I would download Git Easy extension to pack VSCode full of easy commands to control your repository. If you don't know much about git, spend a day reading about it, setting up your GitLab account and making some test repositories, it shouldn't take long to get used to it.

    Screenshot_6.png







     








     






    Aside from that, I use the task runner a lot, most of it being done for projects non-MV related, especially for running gulp tasks to build projects and what not.  Umm, what else do I love about it, hmmm? Oh, the speed is awesome, I've used brackets before VSCode and it's less snappy than VSCode, brackets also had a hard time opening larger files just like Atom. I'd say Sublime is actually a little bit slower, not much than VSCode with loading large files, like the Pixi library or another large framework.


    Comments! Man VSCode makes it fun to comment my code, download the extension "Document This" and comment some functions with it, and VSCode will show it in the IntelliSense, epicness. Obviously, for Team projects or large projects this is awesome because you'll always have a well-documented code and easily hover over a method name and bam there it. is!  A few cons with it though is it don't work 100% all the time, especially if you end up referencing the original method, it won't detect the core class but rather the reference only. It does however work great with typescript and it's definition files, it is Microsoft after all lol.


    Few screenshots of the IntelliSense working it's magic with ES6 and it works awesome with ES6.

    . Screenshot_8.png


    Screenshot_9.png


    Screenshot_10.png


    As for a configuration, there is not much I can share, my editors settings match my style of coding which is now JS Standard style. Unless you use gulp and you want to setup tasks then just let me know and I'll let you know how to setup a launch.json and what not. Anyways, cheers for now! Glad you found VSCode and I hope it grows on you like it did for me.





    3
     
    Last edited by a moderator: Jan 4, 2017
    #3
    Quxios, Clock Out and Jonforum like this.
  4. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,581
    Likes Received:
    1,360
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    nice among my favorite


    Autolinting for Javascript
    Automatically activate the correct Javascript linter for your workspace.


    ESLint
    Integrates ESLint syntax error into VS Code.


    Bracket Pair Colorizer
    allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.
    [​IMG]



    canvas-snippets
    A Canvas(JavaScript) Snippets Extension
    [​IMG]



    CodeMetrics
    Computes complexity in TypeScript / JavaScript files.
    It show if you function are too much complexe customise about your work (great for check optimisation)
    [​IMG]





    Color Highlight
    Highlight alpha, hexa colors in your editor
    great yo use some color, detect ex: rgba(0, 0, 0, 1)
    Capture.JPG





    eval
    Eval your select javascript codes in a output. but i don't find the way to use use it, i need read more docu
    [​IMG]







    javascript console utils
    Help insert and remove console.(*) statements, very cool.
    Select your line and CTRL+Shift+L to make the line console.log for debug
    [​IMG]





    Text Marker
    Select text in your code and mark all matches. The marking colour is configurable
    Nice if you never close your editor, because its dont save marker, But I made a request the author
    [​IMG]



    TODO Highlight
    highlight TODOs, FIXMEs, and any keywords, annotations.
    Fun and great for visual help
    [​IMG]



    VSCode Great Icons
    A big pack of icons (100+) for your files.
    great visual for multi file extension and language
    [​IMG]

    If there is other good suggestion welcome to you.
     
    Last edited: May 18, 2017
    #4
    Amy Pond, Lecode and LTN Games like this.
  5. LTN Games

    LTN Games Veteran Veteran

    Messages:
    621
    Likes Received:
    475
    Location:
    Canada
    First Language:
    English
    Primarily Uses:
    RMMV
    If you're using eslint, I have some globals you can add to your .eslintrc file, which should help remove those annoying not defined variables warning. It's not all of them but it's a big chunk of them. I don't have any more tips other than just get familiar with what VSCode already provides, like peek definition and go to definition, format file, format selection, etc, they're very helpful.  


    "globals": {
    "document": true,
    "navigator": true,
    "window": true,
    "XMLHttpRequest": true,
    "TDDP": true,
    "Game_Temp": true,
    "Yanfly": true,
    "MVC": true,
    "fs": true,
    "PIXI": true,
    "Utils": true,
    "require": true,
    "$dataAnimations": true,
    "$dataWeapons": true,
    "$dataArmors": true,
    "$dataItems": true,
    "$dataSkills": true,
    "$dataStates": true,
    "$dataEnemies": true,
    "$dataClasses": true,
    "$dataActors": true,
    "$dataMap": true,
    "$gameSystem": true,
    "$gameParty": true,
    "$gamePlayer": true,
    "$gameMap": true,
    "$gameTemp": true,
    "$gameMessage": true,
    "$gameScreen": true,
    "$gameVariables": true,
    "$gameSwitches": true,
    "$gameSelfSwitches": true,
    "$gameActors": true,
    "contents": true,
    "TouchInput": true,
    "Input": true,
    "BattleManager": true,
    "DataManager": true,
    "ImageManager": true,
    "PluginManager": true,
    "TextManager": true,
    "StorageManager": true,
    "AudioManager": true,
    "SoundManager": true,
    "SceneManager": true,
    "Scene_Boot": true,
    "Stage": true,
    "Rectangle": true,
    "Bitmap": true,
    "Sprite": true,
    "TilingSprite": true,
    "Graphics": true,
    "Tilemap": true,
    "Game_CharacterBase": true,
    "Game_Character": true,
    "Game_Player": true,
    "Game_Event": true,
    "Game_Vehicle": true,
    "Game_Action": true,
    "Game_Battler": true,
    "Game_Actor": true,
    "Game_Party": true,
    "Game_Interpreter": true,
    "Game_Map": true,
    "Game_Message": true,
    "Sprite_Base": true,
    "Spriteset_Base": true,
    "Spriteset_Map": true,
    "Sprite_Actor": true,
    "Window": true,
    "Window_Base": true,
    "Window_Selectable": true,
    "Window_Command": true,
    "Window_Gold": true,
    "Window_Help": true,
    "Window_MenuStatus": true,
    "Window_ItemList": true,
    "Window_BattleActor": true,
    "Window_SkillStatus": true,
    "Window_ItemCategory": true,
    "Window_HorzCommand": true,
    "Window_MenuCommand": true,
    "Window_Message": true,
    "Scene_Base": true,
    "Scene_MenuBase": true,
    "Scene_Battle": true,
    "Scene_Item": true,
    "Scene_Map": true,
    "Scene_Menu": true,
    "Scene_Title": true,
    "Scene_Gameover": true,
    "Spriteset_Battle": true
    },


    If you're not sure where to place this globals object, you do it like so.


    Screenshot_13.png
     
    #5
    mlogan, Lecode and Jonforum like this.
  6. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,581
    Likes Received:
    1,360
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    @LTN Games


    hey thanks i lot , this is very nice.


    I recently discovered the setting.json
    I think eslint , is the place to add?

    Capture.JPG



    I'm happy because I discovered how to put keywords in highlight as in notepad ++.
    with the TODO plugin.

    Code:
    	{  	//adding custom keywords with custom look
                "text": "keyword, text or sentence", // custom text to be highlighted
                "color": "black", // the text color, any css color identifier is valid
                "backgroundColor": " rgba(255, 255, 255, 0.8)"
            }
     
    #6
  7. LTN Games

    LTN Games Veteran Veteran

    Messages:
    621
    Likes Received:
    475
    Location:
    Canada
    First Language:
    English
    Primarily Uses:
    RMMV
    For eslint configuration, just open your command panel and type eslint the first option should say, create eslintrc file. This should create a new file with basic settings and this is where you will place the globals object.


    Screenshot_14.png


    Also, I plan on checking out a few of those extensions, especially this keyword one, looks really useful to make things stand out a bit more than they


    do.


    P.S for more eslint config options and help check out this.. http://eslint.org/docs/user-guide/configuring
     
    Last edited by a moderator: Jan 8, 2017
    #7
  8. ChampX

    ChampX Veteran Veteran

    Messages:
    185
    Likes Received:
    115
    First Language:
    English
    Hey all,

    I recently found Visual Studio Code and downloaded it because of its available features. I am familiar with attaching a debugger using Visual Studio 2015 to .NET programs for debugging at my day job and it looks like Visual Studio Code will allow me to accomplish the same thing with JS applications.

    One thing I seem to be puzzled with and haven't really found an answer to was how I can get Code's debugger to attach to a running MV game or start debug when running the game from the editor. I am not sure what exact configuration the launch.json file needs to successfully do this. I tried main.js but that didn't seem to work.

    Has anyone figured this out yet? Appreciate the help and thanks in advance!
     
    #8
  9. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,581
    Likes Received:
    1,360
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    I share this little trick that helps me a lot.
    The reference by unique color code.
    If you have more than one reference, it may be difficult to see and found.

    A little detour on this page
    https://www.google.ca/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=hex+color&*
    To index your long code
    I can not do without this technique that helps me a lot visually.

    Then you just need to know your personal style of color.
    For example, line help for copy is for me on black background and blue gold color .

    Sans-titre-1.jpg
     
    #9
    Dust likes this.
  10. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,581
    Likes Received:
    1,360
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    this new update in 1.10.2 Update, will maybe make some plugin coder happy .

    Auto JSDoc comments
    VS Code will now provide a JSDoc comment template for JavaScript and TypeScript functions when you type /**:

    [​IMG]


    Preview: Minimap
    A Minimap gives you a high level overview of your source code which is very useful for quick navigation and code understanding. To enable VS Code's Minimap, set "editor.minimap.enabled": true to turn on the rendering of a Minimap for the current file.
    [​IMG]

    Copy with syntax highlighting (Why is not work on this forum ;_;;_;;_;;_;;_;)
    You can now copy selected text to the Clipboard with syntax highlighting. It can be very useful when you paste the content into another application, for example, Outlook, and the content pasted into the application still has the correct formatting and colorization.

    Technically, we add a new entry for HTML content into the Clipboard so even if the target application doesn't support pasting rich text, the pasting will still work.

    [​IMG]
     
    #10
  11. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,581
    Likes Received:
    1,360
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    i finaly found how to show indent line guide :rock-left:
    [​IMG]

    the parameter are
    Code:
    "editor.renderIndentGuides": true,
     
    #11
    LTN Games likes this.
  12. Fornoreason1000

    Fornoreason1000 Black Sheep Veteran

    Messages:
    199
    Likes Received:
    92
    Location:
    Anor Londo
    First Language:
    English
    Primarily Uses:
    RMMV
    not sure if relevant, but i created a JS "project file" (.jsproj) . first was RpgmakerMV.jsproj then added myPlugin.jsProj.
    both files sit in the RPGmaker Project directory with the game.rpgproj file.


    JSVSconfig.png

    RPGmakerMV contains all the vanillas stuff , DSEIV contains all the plugins.
     
    #12
    Jonforum likes this.
  13. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,581
    Likes Received:
    1,360
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    These to do what exactly a file jsProj
    in you project you will have folder create by vsc named. (.vscode)
    you will have launch.json , settings.json automatically create.
    Can you tell more about this extension?
     
    #13
  14. Fornoreason1000

    Fornoreason1000 Black Sheep Veteran

    Messages:
    199
    Likes Received:
    92
    Location:
    Anor Londo
    First Language:
    English
    Primarily Uses:
    RMMV
    idk what its like for you, but every time I open a JS script, Visual studio has no idea its part of a project. Visual Studio usually deals in Project Files and Solutions (groups of Projects). these tell Visual studio whats what. this should be an inbuilt feature? (it is for me). Its more of a project configuration.

    So what i did was went to File -> new -> new Project_> JavaScript -> Blank Windows 8.1 App. and save it (I called mine DSEIV) in my RPGmakerMV projects directory (in my screen shot there's another called RPGmakerMV). Visual Studio then creates a Solution files Automatically in the background in that directory. You can Delete all the fluff that VS studio generates

    From there in Solution explorer click on your project then on "show all files" thats on the tool bar of the solution explorer window. it looks like a bunch of folders stacked on each other. once you click it, you can see your RPGmakers project directory, right click on the js folder and the index.html file and select include in project and you done!.

    Now for Intellisense!
    inteelisense currenty half works. it picks up anything thats in the current JS file. helpful, but it could be better if we let it use all of RPGmakerMV core files.
    create a new JS script and put it anywhere in the JS, next to the core files will do and call it globals.js
    open globals.js in Visual Studio, then in your Solution Explorer select all the core files and drag them into global .js after that,
    globals.js should look something like this

    Code:
    /// <reference path="../main.js" />
    /// <reference path="../rpg_core.js" />
    /// <reference path="libs/fpsmeter.js" />
    /// <reference path="libs/howler.core.min.js" />
    /// <reference path="libs/howler.js" />
    /// <reference path="libs/howler.min.js" />
    /// <reference path="libs/howler.spatial.min.js" />
    /// <reference path="libs/lz-string.js" />
    /// <reference path="libs/pixi-picture.js" />
    /// <reference path="rpg_managers.js" />
    /// <reference path="rpg_objects.js" />
    /// <reference path="rpg_scenes.js" />
    /// <reference path="rpg_sprites.js" />
    /// <reference path="rpg_windows.js" />
    /// <reference path="../plugins.js" />
    
    
    you can also drag in your plugins as well. now that you have done that drag global.js to one of your plugins. it should add something like /// <reference path="../globals.js" /> to the top of the plugin. your plugin should now pickup all the functions and "classes" that comes with RPGmaker and from any plugins you added to globals.js :)
    JSVSconfig2.png
    there are a few discrepancies. Window is a class in RPGmakerMV but also a global variable in WLJS2. so intellisense doesnt really work in those cases
     
    Last edited: May 19, 2017
    #14
  15. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,581
    Likes Received:
    1,360
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    Ok I understand a bit.
    But I think there is a simpler way?
    It opens the project automatically.
    The important parameter for me is
    "window.reopenFolders": "all",
    So if I open a Js in the current project, all the js file on which I worked will automatically opened
    with the current directory of current projet in workspace.
    If i open a js in other project, is have own parameter with folder launch.json and settings.json

    Example if i open js in C:\Users\jonle\Documents\Games\myproject\js
    i get automatically all my last configu open and all js for this project open.
    22222222222.jpg
     
    #15
  16. Fornoreason1000

    Fornoreason1000 Black Sheep Veteran

    Messages:
    199
    Likes Received:
    92
    Location:
    Anor Londo
    First Language:
    English
    Primarily Uses:
    RMMV
    yeah, I'm kinda still experimenting too. i found that open Website works well too. (our games are essentially just web pages) then save the solution file. globals.js is still needed for intellisense though.

    I just realized I'm using VS 2015 Community and this is About VS 2015 Code Lol. no wonder my explanation was confusing. VS Code does have intellisense for java script. im not sure if it will work the same way but it seems to be the case here.
     
    #16
  17. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,581
    Likes Received:
    1,360
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    With a little motivation, I applied a universal model for all my plugin.
    It becomes very easy to quickly find methods or references thanks to color.
    Once the styles apply and the colors memorize,we save a lot of time.

    Open in new tabs, warning huge resolution.
    sdrghbhsdrhb.jpg
    --
    dgdg.jpg
     
    #17
    Fornoreason1000 likes this.
  18. Mister.Right

    Mister.Right Veteran Veteran

    Messages:
    249
    Likes Received:
    83
    My previous work project I used Notepad++ for most my front end stuffs with JS/Jquery/HTML/CSS. The current project I use VSCode, mainly because VSCode has native support for TypeScript. I favor working with light weight and simple editor so my settings are very simple with a few plugins.

     
    #18
  19. waynee95

    waynee95 Lunatic Coder Veteran

    Messages:
    626
    Likes Received:
    511
    Location:
    Germany
    First Language:
    German
    Primarily Uses:
    RMMV
    #19
    Jonforum likes this.
  20. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,581
    Likes Received:
    1,360
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    in the last update.
    we can separate the window of the code in 2, and work on 2 different line !!
    the code update are in reel time in the 2 Windows, it is more necessary to proceed to each faith all the code to go looking for a line.
    it's really amazing
    [​IMG]
    just drag twice your file to the width limit like for windows 10.
     
    #20

Share This Page