Add tslint-loader

config/webpack/webpack.config.dev.js

@@ -13,6 +13,20 @@ module.exports = {
   },
   module: {
     rules: [
+      {
+        enforce: 'pre',
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: 'tslint-loader',
+            options: {
+              configFile: 'tslint.json',
+              tsConfigFile: 'tsconfig.json',
+              fix: true,
+            },
+          },
+        ],
+      },
       {
         test: /\.tsx?$/,
         exclude: /node_modules/,

package.json

@@ -26,6 +26,7 @@
     "tslint": "^5.10.0",
     "tslint-config-prettier": "^1.12.0",
     "tslint-config-standard": "^7.0.0",
+    "tslint-loader": "^3.6.0",
     "tslint-plugin-prettier": "^1.3.0",
     "typescript": "^2.8.3",
     "uglify-es": "^3.3.7",

src/typescript/components/Container.tsx

@@ -5,12 +5,10 @@ import Menu from './Menu'
 import Footer from './Footer'
 
 interface Props {
-  className?: string;
+  className?: string
 }
 
-const Container: React.SFC<Props> = ({
-  className,
-}) => {
+const Container: React.SFC<Props> = ({ className }) => {
   return (
     <div className={className}>
       <Header />

src/typescript/components/Footer.tsx

@@ -4,7 +4,14 @@ const Footer = () => {
   return (
     <div className="footer">
       <hr />
-      Hosted on <a href="https://github.com/s4kr4/s4kr4.github.io" target="_blank" rel="noopener noreferrer">GitHub</a>
+      Hosted on{' '}
+      <a
+        href="https://github.com/s4kr4/s4kr4.github.io"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        GitHub
+      </a>
       <br />
       © 2017 s4kr4
     </div>

src/typescript/components/Header.tsx

@@ -2,12 +2,10 @@ import * as React from 'react'
 import styled from '../styled-components'
 
 interface Props {
-  className?: string;
+  className?: string
 }
 
-const Header: React.SFC<Props> = ({
-  className,
-}) => (
+const Header: React.SFC<Props> = ({ className }) => (
   <div className={className}>
     <h2>s4kr4</h2>
   </div>

src/typescript/components/Menu.tsx

@@ -5,12 +5,10 @@ import MenuItem from './MenuItem'
 import Sites from '../../assets/Sites'
 
 interface Props {
-  className?: string;
+  className?: string
 }
 
-const Menu: React.SFC<Props> = ({
-  className,
-}) => {
+const Menu: React.SFC<Props> = ({ className }) => {
   const sites = Sites.map((site, i) => {
     return (
       <MenuItem
@@ -23,11 +21,7 @@ const Menu: React.SFC<Props> = ({
     )
   })
 
-  return (
-    <div className={className}>
-      {sites}
-    </div>
-  )
+  return <div className={className}>{sites}</div>
 }
 
 export default styled(Menu)`

src/typescript/components/MenuItem.tsx

@@ -3,19 +3,19 @@ import * as FontAwesome from 'react-fontawesome'
 import styled from 'styled-components'
 
 interface Props {
-  className?: string;
-  name: string,
-  text: string,
-  url: string,
-  modifier: string,
+  className?: string
+  name: string
+  text: string
+  url: string
+  modifier: string
 }
 
 const MenuItem: React.SFC<Props> = ({
   className,
   name,
   text,
   url,
-  modifier,
+  modifier
 }) => {
   return (
     <span className={className}>
@@ -33,24 +33,23 @@ const MenuItem: React.SFC<Props> = ({
 
 export default styled(MenuItem)`
   margin: 10px;
-	display: inline-block;
-	transition: .3s;
-	transform: scale(1);
+  display: inline-block;
+  transition: 0.3s;
+  transform: scale(1);
 
   &:hover {
-	  transform: scale(1.3);
+    transform: scale(1.3);
   }
 
   .github-icon {
-    color: #24292E;
+    color: #24292e;
   }
 
   .qiita-icon {
-    color: #79B74A;
+    color: #79b74a;
   }
 
   .hatenablog-icon {
-
   }
 
   .twitter-icon {

yarn.lock

@@ -5799,7 +5799,7 @@ rimraf@2:
   dependencies:
     glob "^7.0.5"
 
-rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2:
+rimraf@^2.2.8, rimraf@^2.4.4, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
   dependencies:
@@ -6596,6 +6596,16 @@ tslint-eslint-rules@^4.1.1:
     tslib "^1.0.0"
     tsutils "^1.4.0"
 
+tslint-loader@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/tslint-loader/-/tslint-loader-3.6.0.tgz#12ed4d5ef57d68be25cd12692fb2108b66469d76"
+  dependencies:
+    loader-utils "^1.0.2"
+    mkdirp "^0.5.1"
+    object-assign "^4.1.1"
+    rimraf "^2.4.4"
+    semver "^5.3.0"
+
 tslint-plugin-prettier@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/tslint-plugin-prettier/-/tslint-plugin-prettier-1.3.0.tgz#7eb65d19ea786a859501a42491b78c5de2031a3f"