配置Electron项目： Vite + TS+ React + TailwindCss + Prettier + Husky

某一天，天气晴朗，你们领导突然讲，你们要开发一套桌面软件，并且技术栈选择Electron；你有一点小开心，又有一点小顾虑，那么怎么开始一个Electron项目？下面是配置Electron的一套完整流程。

众所周知，前端工程化里：

首先要配置脚手架工具，我们这里选择Vite，道理不必多说；

开发框架选择React，懂得都懂；

开发语言选择Typescript，爱就一个字；

样式选择TailwindCss，因为我们喜欢声明式开发；

如果恰巧你还是个处女座，好吧，加上prettier；

什么？你们组还有一些应届生？再整一个Husky；

够了。开整

1.使用Vite+TS创建Electron：

执行下面的命令：


npm init electron-app@latest my-new-app -- --template=vite-typescript

这里执行好后，项目基本结构就创建好了；

你可以选择yarn start或者npm run start 来运行起来项目；

2.集成React：

React的便利性不必多说，开发Electron的话，选择React也可以很大程度上提高效率，执行下面的命令：


npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom

react和react-dom是使用react必要的library，@types/react和@types/react-dom提供了一些类型声明，方便Typescript来识别；

3.新增两个文件：


//src/common/main.tsx
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'

const container = document.getElementById('root')
if (container) {
    const root = createRoot(container)
    root.render(
        <React.StrictMode>
            <App />
        </React.StrictMode>
    )
} else {
    console.error('Failed to find the root element')
}


//App.tsx
import React from 'react'

const App: React.FC = () => {
    return (
        <div>
            <h1>
                Hello, Electron with React and TypeScript!
            </h1>
        </div>
    )
}

export default App

同时在src/renderer.ts里导入main.tsx文件:

import './common/main'

最后修改index.html:


<!--index.html-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World!</title>
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="/src/renderer.ts"></script>
    </body>
</html>

好的，React就集成进来了！

4.集成TailwindCSS：

执行以下命令


npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置tailwind.config.js：


/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {},
    },
    plugins: [],
}

现在你就可以使用tailwind来写css了！


import React from 'react'

const App: React.FC = () => {
    return (
        <div className=" w-full h-full">
            <h1 className=" text-3xl font-bold underline">
                Hello, Electron with React and TypeScript!
            </h1>
        </div>
    )
}

export default App

是不是很舒服～

以上配置好后，项目基本可以进入开发了；但是为了代码美观，以及团队代码不出格式问题，那么还需要prettier和husky

5.安装prettier


npm install --save-dev --save-exact prettier

创建一个.prettierrc文件：


touch .prettierrc

在文件里配置代码格式规范：


{
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": false,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

然后需要，在VSCode里安装prettier插件：

最后需要在VSCode里配置一下prettier.

打开VSCode的setting.json:


  ...
 "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true
  }
  ...

6.安装Husky


npm install --save-dev husky lint-staged

然后，在package.json中配置它们：


json"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,jsx,ts,tsx}": "prettier --write"
}

现在，每次你尝试提交代码时，lint-staged都会运行Prettier来格式化你暂存的修改。

大功告成！

好了，现在你可以愉快的开放你的Electron项目了～