vite项目添加eslint prettier及husky方法实例

 更新时间:2022年07月04日 12:04:18   作者:倾墨  
这篇文章主要为大家介绍了vite项目添加eslint prettier及实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

1. 初始化vite项目

npm init vite
✔ Project name: … vite-project // 项目名称,默认 vite-project
✔ Select a framework: › react  // 选择框架
✔ Select a variant: › react-ts // 选择组合

2. 添加eslint

安装

npm i -D eslint

初始化eslint配置

npx eslint --init
✔ How would you like to use ESLint? 
// To check syntax, find problems, and enforce code style
✔ What type of modules does your project use? 
// JavaScript modules (import/export)
✔ Which framework does your project use? 
// react
✔ Does your project use TypeScript? 
// Yes
✔ Where does your code run? 
// browser
✔ How would you like to define a style for your project? 
// Use a popular style guide
✔ Which style guide do you want to follow? 
// Airbnb
✔ What format do you want your config file to be in? 
// JavaScript

解决eslint报错

Missing semicolon.eslint: 末尾加上;即可

JSX not allowed in files with extension '.tsx': 在.eslintrc.json中添加rules设置

{
    // ...
    "react/jsx-filename-extension": [
        "error",
        {
            "extensions": [".js", ".jsx", ".tsx", ".ts"]
        }
    ]
};

{count} must be placed on a new line: 代码换行即可;

Unable to resolve path to module './App': 在.eslintrc.json中添加rules设置

{
    // ...
    rules: {
         "import/no-unresolved": "off",
         "import/extensions": "off",
         "import/no-absolute-path": "off"
    },
};

'vite' should be listed in the project's dependencies, not devDependencies.:

.eslintrc.json中添加rules设置

{
    // ...
    "rules": {
        "import/no-extraneous-dependencies": [
            "error", 
            {"devDependencies": true}
        ]
        // ...
    }
};

3. 添加 prettier

安装

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

prettier: 核心模块

eslint-config-prettier: 关闭所有不必要或可能跟prettier产生冲突的规则

eslint-plugin-prettier: 可以让eslint使用prettier规则进行检查

配置

根目录下.eslintrc.json文件中添加extends设置

{
    // ...
    "extends": [
        // ...
        "plugin:prettier/recommended",
    ],
}

根目录下创建.prettierrc.json文件

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

注意⚠️:

修改.prettierrc.json文件后,需要重启vscode才生效

如果配置后,配置不生效,尝试以下设置:

4. 添加 husky和lint-staged

安装

npm i -D lint-staged husky

配置

package.json中添加脚本

npm set-script prepare "husky install"

package.json文件的scripts中,就会自动添加prepare

2. 初始化husky,将 git hooks钩子交由husky执行

npm run prepare

会在根目录创建.husky文件夹

3. 配置package.json

package.json文件如下:

{
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended",
    "plugin:import/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "import/no-extraneous-dependencies": [
      "error", 
      {"devDependencies": true}
    ],
    "react/jsx-filename-extension": [
      "error",
      {
        "extensions": [".js", ".jsx", ".tsx", ".ts"]
      }
    ],
    "import/no-unresolved": "off",
    "import/extensions": "off",
    "import/no-absolute-path": "off"
  }
}

添加钩子pre-commit

npx husky add .husky/pre-commit "npx lint-staged"

5. 配置commitlint

  • 作用:规范提交信息
  • 格式:git commit -m '类型: 描述性文字'
类型概念
build编译相关的修改,例如发布版本、对项目构建或者依赖的改动
ci持续集成修改
docs文档修改
feat新特性、新功能
fix修改bug
perf优化相关,比如提升性能、体验
refactor代码重构
revert回滚到上一个版本
style代码格式修改, 注意不是 css 修改
test测试用例修改
chore其他修改,比如改变构建流程、或者增加依赖库、工具等
  • 安装
npm i -D commitlint @commitlint/config-conventional
  • 配置

package.json中配置commitlint

{
    // ...
    "commitlint": {
        "extends": [
            "@commitlint/config-conventional"
        ]
    }
}
  • 添加钩子
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

git commit 就会触发提交规范的校验啦;

以上就是vite项目添加eslint prettier及husky方法实例的详细内容,更多关于vite项目添加eslint prettier husky的资料请关注脚本之家其它相关文章!

相关文章

  • vue实现带自动吸附功能的悬浮球

    vue实现带自动吸附功能的悬浮球

    这篇文章主要为大家详细介绍了vue实现带自动吸附功能的悬浮球,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue项目打包后提交到git上为什么没有dist这个文件的解决方法

    vue项目打包后提交到git上为什么没有dist这个文件的解决方法

    这篇文章主要介绍了vue项目打包后提交到git上为什么没有dist这个文件的解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • VUE动态生成word的实现

    VUE动态生成word的实现

    这篇文章主要介绍了VUE动态生成word的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue项目如何让局域网ip访问配置设置

    vue项目如何让局域网ip访问配置设置

    这篇文章主要介绍了vue项目如何让局域网ip访问配置设置,具有很好的参考价值,希望对大家有所帮助。
    2022-09-09
  • vue2.x引入threejs的实例代码

    vue2.x引入threejs的实例代码

    这篇文章主要介绍了vue2.x引入threejs,如果在开发过程中出现threejs生成的canvas出现外边框,只需要用css样式修改,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • 如何换个角度使用VUE过滤器详解

    如何换个角度使用VUE过滤器详解

    这篇文章主要给大家介绍了如何换个角度使用VUE过滤器的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用VUE具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • LogicFlow内置插件使用实例

    LogicFlow内置插件使用实例

    这篇文章主要为大家介绍了LogicFlow内置插件使用实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 在Vue中使用动态import()语法动态加载组件

    在Vue中使用动态import()语法动态加载组件

    在Vue中,你可以使用动态import()语法来动态加载组件,动态导入允许你在需要时异步加载组件,这样可以提高应用程序的初始加载性能,本文给大家介绍在Vue中使用动态import()语法动态加载组件,感兴趣的朋友一起看看吧
    2023-11-11
  • Vue路由监听实现同页面动态加载的示例

    Vue路由监听实现同页面动态加载的示例

    本文主要介绍了Vue基于路由监听实现同页面动态加载的示例,重点在于切换路由的时候,重新拉取列表数据,接下来看看实现方法吧
    2021-05-05
  • vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能,需要的朋友可以参考下
    2018-08-08

最新评论