作者:admin,发布日期:2021-02-03
阅读:575;评论:0

仅做个人记录

项目创建

Vite (French word for "fast", pronounced /vit/) is a new breed of frontend build tool that significantly improves the frontend development experience.

Vite代码:https://github.com/vitejs/vite

Vite文档:https://vitejs.dev/

运行yarn create创建项目

yarn create @vitejs/app

Snipaste_2021-02-03_23-52-03.jpg

进入项目,安装依赖

cd test-proj
yarn install

开启开发服务器

yarn run dev

当看到下列提示,说明脚手架搭建成功

Snipaste_2021-02-03_23-54-21.jpg

配置eslint和prettier

安装eslint,eslint-plugin-vue(用于支持vue代码检查,-D代表添加到开发依赖)

yarn add -D eslint eslint-plugin-vue

安装prettier以及附属插件

yarn add -D prettier eslint-plugin-prettier eslint-config-prettier

接着创建eslint配置,在项目根目录创建【.eslintrc.js】

  • env设置node为true,代表开启node的特性(不开的话module会报错)

  • rules配置参考eslint-plugin-prettier(https://github.com/prettier/eslint-plugin-prettier)

  • extends配置参考eslint-plugin-vue(https://eslint.vuejs.org/user-guide/#usage)

module.exports = {
  env: {
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:prettier/recommended",
  ],
};

配置完eslint后,配置prettier配置,在项目根目录创建【.prettierrc.js】

module.exports = {
  endOfLine: "auto",
  printWidth: 120
};

prettier配置项说明

  • endOfLine - 防止行结尾符不一致导致eslint提示错误(参考:https://prettier.io/docs/en/options.html#end-of-line)

  • printWidth - 配置代码最大行数

增加一键格式化所有文件

修改package.json文件,在script增加以下项目

命令说明:

  • eslint - 运行eslint命令

  • --fix - 修复并校验

  • --ext - 指定扩展文件名

  • "src" - 代表只对src目录运行lint

  "scripts": {
    ...原有项目
    "lint": "eslint --fix --ext .js,.vue src"
  },

使用的VSCode插件

Snipaste_2021-02-04_00-12-04.jpg

编译项目

yarn run build


评论区

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。