Botframework-webchat: Better coding styles for samples

[compulim]

Background

Bring better coding style for samples folder.

Tasks

• [x] Add React samples
• [x] Clean up existing samples
• [ ] Make sure we have samples for every entrypoints
  
  
  
  • [ ] <iframe>
  
  
  • [ ] JavaScript dist packages
  
  
  • [x] React with package from npm registry
  
  
• [ ] VSCode per-workspace settings for quick formatting thru ALT+SHIFT+F

Coding style

For clean up, I also suggest we should have consistency coding styles. At least samples for now:

• Indent with 2 spaces
• Prefer const/let over var
• Single quotes ' for strings and backtick for string composition and complicated concatenation
• ~Explicitly add type="text/javascript" for <script> and type="text/css" for <style>/<link>~
• CSS font-family should be single-quoted, font-family: 'Segoe UI'; over font-family: Segoe UI;
• Map constructor have their members sorted, prefer { abc: 123, def: 456 }, over { def: 456, abc: 123 }

Additional coding styles up for comment

And RFC for these coding styles:

Align : and = vertically

directLine: {
  domain: params['domain'],
  secret: params['s'],
  token: params['t'],
  webSocket: params['webSocket'] && params['webSocket'] === 'true'
}

Should become

directLine: {
  domain   : params['domain'],
  secret   : params['s'],
  token    : params['t'],
  webSocket: params['webSocket'] && params['webSocket'] === 'true'
}

[danmarshall]

This is cool William! Can I propose a feature? I think it would be easy for everyone if we use VSCode's "autoformat" feature. This way we let the tool do the work to deliver consistency. There is a keyboard shortcut: ALT+SHIFT+F as well as a menu command.

[compulim]

Sure, will try adding VSCode workspace settings for indentation styles et al. We need VSCode extension for vertical colon alignments.

[eanders-MS]

I'm partial to just going with VSCode's generic formatting, unless it looks really broken which can happen in some cases. I'd like to avoid the need for extra plugins.