前端大屏展示框架搭建（一）

项目开发很常用到，记录下搭建的过程。

基于vue-cli3新建一个项目

过程已经写过了~~~

基于VS Code的代码风格统一配置

VS Code先安装这几个插件

1
Vetur、ESLint、Prettier-Code formatter

Beautify也挺好用的，不过和Prettier有冲突，放弃了~~

配置settings.json

这个可以全局配置，但是为了不影响导入项目时别人的设置，可以在当前项目的根路径里创建一个.vscode/settings.json文件，里面设置的配置只在当前项目生效。

我的配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
    "workbench.colorTheme": "Monokai",
    "window.zoomLevel": 0,
    "editor.fontSize": 14,
    "editor.formatOnSave": true,
    //保存时eslint自动修复错误
    //保存自动格式化
    "editor.codeActionsOnSave": {
        "source.fixAll.tslint": true,
        "source.fixAll.eslint": true
    },
    "prettier.singleQuote": true,
    "prettier.eslintIntegration": true,
    "prettier.tslintIntegration": true,
    "vetur.format.defaultFormatter.js": "none",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "git.enableSmartCommit": true
}

ESLint 和 Prettier 的冲突修复

由于需要同时使用prettier和eslint，prettier的一些规则和eslint的一些规则可能存在冲突，如prettier字符串默认是用双引号而esLint定义的是单引号的，这样格式化之后就不符合ESLint规则了。

要解决冲突就需要在Prettier的规则配置里也配置上和ESLint一样的规则，直接覆盖掉

配置.eslintrc.js

在当前项目的根路径里创建一个.eslintrc.js文件，配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: ['plugin:vue/essential', 'eslint:recommended'],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        //强制使用单引号
        quotes: ['error', 'single'],
        //强制不使用分号结尾
        semi: ['error', 'never']
    },
    parserOptions: {
        parser: 'babel-eslint'
    }
}

配置prettier

有2种方式，一种是直接在当前项目的根路径里新建一个.prettierrc文件，然后配置如下：

1
2
3
4
5
6
7
8
{
   //开启 eslint 支持
  "eslintIntegration": true,
  //使用单引号
  "singleQuote": true,
  //结尾不加分号
  "semi": false
}

上面的方式在我的工程里面有冲突，所以我采取第二种方式了，直接在VSCode的Preferences–>Settings里面设置，配置如下：

1
2
3
4
5
6
//开启 eslint 支持
"prettier.eslintIntegration": true,
//使用单引号
"prettier.singleQuote": true,
//结尾不加分号
"prettier.semi": false,

这样就解决了，每次保存文件的时候，代码都会格式化一遍的。足够统一多人开发项目的代码风格了，强迫症患者的福音！

工程代码

整个项目的代码在下面地址，参考commit就懂过程了

大屏开发框架工程代码