wKich/starter.md

## starter.md

      
    Raw
  

              starter.md
            
          
    Enviroment


VS Code extensions

Equinusocio.vsc-material-theme
Shan.code-settings-sync
WallabyJs.quokka-vscode (?)
christian-kohler.path-intellisense
dbaeumer.vscode-eslint
eamodio.gitlens
eg2.tslint
esbenp.prettier-vscode
file-icons.file-icons
flowtype.flow-for-vscode (?)
maty.vscode-mocha-sidebar (?)
msjsdiag.debugger-for-chrome


VS Code Settings

{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "editor.rulers": [120],
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.wrappingIndent": "none",
  "workbench.colorTheme": "Material Theme Darker",
  "workbench.iconTheme": "file-icons",
  "files.autoSave": "onFocusChange",
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "prettier.eslintIntegration": true,
  "prettier.stylelintIntegration": true,
}
Шаги для старта


git init
echo "node_modules" > .gitignore
npm init -y
npm i -D @babel/preset-{env,react,typescript} @babel/core @babel/polyfill
npm i -D @babel/plugin-proposal-class-properties
npm i -D typescript tslint
npm i react react-dom
npm i -D @types/{react,react-dom}
npm i -D webpack-cli webpack webpack-dev-server html-webpack-plugin
npm i -D less
npm i -D style-loader css-loader less-loader html-loader file-loader babel-loader@next
npm i -D prettier prettier-eslint
npx tsc --init
change tsconfig.json

{
    "target": "esnext",
    "jsx": "react"
}

npx tslint --init
change tslint.json

{
  "rules": {
    "arrow-parens": [true, "ban-single-arg-parens"],
    "quotemark": [true, "single", "jsx-double", "avoid-escape", "avoid-template"],
    "semicolon": [true, "never"]
  }
}

create .babelrc

{
  "presets": [
    "@babel/env",
    "@babel/react",
    "@babel/typescript"
  ],
  "plugins": ["@babel/proposal-class-properties"]
}

create .prettierrc

{
  "printWidth": 120,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all"
}

create webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  devServer: {
    historyApiFallback: true,
  },
  devtool: 'source-map',
  entry: [require.resolve('@babel/polyfill'), './src'],
  output: {
    filename: 'static/main.js',
    publicPath: '/',
    devtoolModuleFilenameTemplate: 'file:///[absolute-resource-path]',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [{ loader: 'file-loader', options: { name: 'static/[hash].[ext]' } }],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
}

change package.json

{
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development"
  }
}

create src/index.ts

import React from 'react'
import { render } from 'react-dom'
import App from './App'

render(React.createElement(App), document.getElementById('root'))

create src/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
</head>

<body>
  <div id="root"></div>
</body>

</html>