ethan-deng

JavaScript Intellisense (Code Auto Complete) in Visual Studio 2013

How to set up VS2013 to work with NPM + Browserify

After giving WebStorm 9 a try for a few weeks for client side JS development, WebStorm 9 completely stop responding to user interaction or extremely slow after startup. This force us to go back to the good old boring tool VS :-(.

It seems how to set up JavaScript intellisense such as jQuery 2.0 intellisense for VS 2013 is not well documented at MSDN. The new way to set it up has been blogged at The story behind _references.js.

Here are some missing details and considerations about the setup when use it together with NPM + Browserify.

ethan-deng

Let JS code fly in Visual Studio

Here is a few things to check out to let your JS code fly in Visual Studio.

1. Check available code snippets at "Tools" -> "Code Snippets Manager ..."
2. Install jQuery Code Snippets from "Tools" -> "Extensions and Updates" -> Search
3. Install Brace Completer" from "Tools -> "Extensions and Updates" -> Search
4. Learn the OOTB JS snippets.

This is relatively straight forward. For example to create a funtion, the shortcut is just "function" + Tab. To create a HTML ``````, just type div + Tab.

ethan-deng

##React Custom HTML Attributes must be data-xyz and all lowercase

React Document:

Custom HTML Attributes

If you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them. If you want to use a custom attribute, you should prefix it with data-.

Beside this the attribute name must all lowercase

ethan-deng

React Design Partten

• Parent Component (Stateful)
• Define state and render child based on the state
  • Child Component (Stateless)
  • Get props from parent and render
  • Trigger event handler in parent
• Parent event handler set state and re-render child

ethan-deng

1. Install Sublime 3 http://www.sublimetext.com/3
2. Install Sublime Package Control https://packagecontrol.io/installation#st3

Ctrl + Shift + P

3. Install SublimeCodeIntel http://sublimecodeintel.github.io/SublimeCodeIntel/
4. Install Sublime React.js https://github.com/reactjs/sublime-react
5. Install SublimeTmpl https://packagecontrol.io/packages/SublimeTmpl
6. Install Sublime TortoiseSVN https://github.com/dexbol/sublime-TortoiseSVN

ethan-deng

Bust Client Cache with SPUtility.MakeBrowserCacheSafeLayoutsUrl

    <script src="<%=SPContext.Current.Site.ServerRelativeUrl + SPUtility.MakeBrowserCacheSafeLayoutsUrl("folderUnderLayouts/js/MedInsight.EzInList.js", false)%>"></script>
    <link href="<%=SPContext.Current.Site.ServerRelativeUrl + SPUtility.MakeBrowserCacheSafeLayoutsUrl("folderUnderLayouts/css/easyquery.css", false)%>" rel="stylesheet" type="text/css"  />

ethan-deng

jQuery ajax and ASP.NET Web Services and Web API 2.0

1. Web Services

Get data

$.ajax({
  type: "POST",
  url: "ServiceName.asmx/WebMethodName",
 data: "{}",

ethan-deng

Async Loading of Initail Content with Flux-Alt

The best approach to aysnc load content into data store in Flux-Alt is to

Defined an export method in data store. This is to make sure that all sub components have subscribe the change of the store.

    this.exportPublicMethods({
      load: this.load
    });

ethan-deng

Package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "repository": "",
  "main": "js/app.js",
  "dependencies": {

ethan-deng

Use SASS

1. Install SASS: npm install SASS -g --save-dev
2. Run SASS: node_modules\.bin\node-sass --source-map true scss\app.scss build\app.css