首页 > 其他分享 >【web】1、前端基础搭建

【web】1、前端基础搭建

时间:2024-06-30 17:26:43浏览次数:16  
标签:1.5 vue stylelint web 前端 eslint pnpm config 搭建

1创建项目

1.1 选择node环境

nvm (其他博主)安装教程
https://blog.csdn.net/qq_43940789/article/details/126042822
对应使用命令

nvm list available          // 显示可以安装的所有node.js的版本
nvm install <version>       // 安装node.js的命名 version是版本号
nvm use <version>           // 切换到使用指定的nodejs版本

设置node全局配置

全局配置
npm config set prefix "E:\soft\web\nvm\node_jlobal"
npm config set cache "E:\soft\web\nvm\node_cache"

 1.2 安装全局pnpm

npm i -g pnpm

1.3 使用vue3创建项目

npm create vue@latest

1.4 初始化项目

webstorm 等软件打开项目

#初始化
pnpm i

1.5配置各种代码检测

1.5.1 eslint配置

eslint中文官网:ESLint - Pluggable JavaScript linter - ESLint中文

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具

1.5.1.1 安装 eslint
pnpm i eslint -D
npx eslint --init
1.5.1.2 .eslint.cjs配置文件
module.exports = {
   //运行环境
    "env": { 
        "browser": true,//浏览器端
        "es2021": true,//es2021
    },
    //规则继承
    "extends": [ 
       //全部规则默认是关闭的,这个配置项开启推荐规则,推荐规则参照文档
       //比如:函数不能重名、对象不能出现重复key
        "eslint:recommended",
        //vue3语法规则
        "plugin:vue/vue3-essential",
        //ts语法规则
        "plugin:@typescript-eslint/recommended"
    ],
    //要为特定类型的文件指定处理器
    "overrides": [
    ],
    //指定解析器:解析器
    //Esprima 默认解析器
    //Babel-ESLint babel解析器
    //@typescript-eslint/parser ts解析器
    "parser": "@typescript-eslint/parser",
    //指定解析器选项
    "parserOptions": {
        "ecmaVersion": "latest",//校验ECMA最新版本
        "sourceType": "module"//设置为"script"(默认),或者"module"代码在ECMAScript模块中
    },
    //ESLint支持使用第三方插件。在使用插件之前,您必须使用npm安装它
    //该eslint-plugin-前缀可以从插件名称被省略
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    //eslint规则
    "rules": {
    }
}
1.5.1.3 vue3环境代码校验插件

安装指令

pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser
1.5.1.4 修改.eslintrc.cjs配置文件
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true,
  },
  /* 指定如何解析语法 */
  parser: 'vue-eslint-parser',
  /** 优先级低于 parse 的语法解析配置 */
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true,
    },
  },
  /* 继承已有的规则 */
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['vue', '@typescript-eslint'],
  /*
   * "off" 或 0    ==>  关闭规则
   * "warn" 或 1   ==>  打开的规则作为警告(不影响代码执行)
   * "error" 或 2  ==>  规则作为一个错误(代码不能执行,界面报错)
   */
  rules: {
    // eslint(https://eslint.bootcss.com/docs/rules/)
    'no-var': 'error', // 要求使用 let 或 const 而不是 var
    'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-unexpected-multiline': 'error', // 禁止空余的多行
    'no-useless-escape': 'off', // 禁止不必要的转义字符

    // typeScript (https://typescript-eslint.io/rules)
    '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
    '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
    '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
    '@typescript-eslint/semi': 'off',

    // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
    'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
    'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
    'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
    'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
  },
}
1.5.1.5 .eslintignore忽略文件
dist
node_modules

1.5.1.6 修改package.json

//scripts中添加如下参数项
"scripts": {
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
  }

1.5.2 prettier配置

有了eslint,为什么还要有prettier?eslint针对的是javascript,他是一个检测工具,包含js语法以及少部分格式问题,在eslint看来,语法对了就能保证代码正常运行,格式问题属于其次;

而prettier属于格式化工具,它看不惯格式不统一,所以它就把eslint没干好的事接着干,另外,prettier支持

包含js在内的多种语言。

总结起来,eslint和prettier这俩兄弟一个保证js代码质量,一个保证代码美观。

1.5.2.1 安装依赖
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
1.5.2.2 .prettierrc.json添加规则
{
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "auto",
  "trailingComma": "all",
  "tabWidth": 2
}
1.5.2.3  .prettierignore忽略文件
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*

通过pnpm run lint去检测语法,如果出现不规范格式,通过pnpm run fix 修改

1.5.3 配置stylelint

stylelint为css的lint工具。可格式化css代码,检查css语法错误与不合理的写法,指定css书写顺序等。

1.5.3.1 安装依赖

我们的项目中使用scss作为预处理器,安装以下依赖:

pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D
1.5.3.2 .stylelintrc.cjs配置文件

官网:Home | Stylelint中文文档 | Stylelint中文网

module.exports = {
  extends: [
    'stylelint-config-standard', // 配置stylelint拓展插件
    'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
    'stylelint-config-standard-scss', // 配置stylelint scss插件
    'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
    'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
    'stylelint-config-prettier', // 配置stylelint和prettier兼容
  ],
  overrides: [
    {
      files: ['**/*.(scss|css|vue|html)'],
      customSyntax: 'postcss-scss',
    },
    {
      files: ['**/*.(html|vue)'],
      customSyntax: 'postcss-html',
    },
  ],
  ignoreFiles: [
    '**/*.js',
    '**/*.jsx',
    '**/*.tsx',
    '**/*.ts',
    '**/*.json',
    '**/*.md',
    '**/*.yaml',
  ],
  /**
   * null  => 关闭该规则
   * always => 必须
   */
  rules: {
    'value-keyword-case': null, // 在 css 中使用 v-bind,不报错
    'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
    'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
    'no-empty-source': null, // 关闭禁止空源码
    'selector-class-pattern': null, // 关闭强制选择器类名的格式
    'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
    'block-opening-brace-space-before': 'always', //大括号之前必须有一个空格或不能有空白符
    'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box
    'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask
    'selector-pseudo-class-no-unknown': [
      // 不允许未知的选择器
      true,
      {
        ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性,修改element默认样式的时候能使用到
      },
    ],
  },
}
1.5.3.3 .stylelintignore忽略文件
/node_modules/*
/dist/*
/html/*
/public/*
1.5.3.4 添加脚本
//script 中添加如下脚本
"scripts": {
	"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
}

最后配置统一的prettier来格式化我们的js和css,html代码

 "scripts": {
    "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
    "lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix"
  },

当我们运行pnpm run format的时候,会把代码直接格式化

1.5.4 配置husky

在上面我们已经集成好了我们代码校验工具,但是需要每次手动的去执行命令才会格式化我们的代码。如果有人没有格式化就提交了远程仓库中,那这个规范就没什么用。所以我们需要强制让开发人员按照代码规范来提交。

要做到这件事情,就需要利用husky在代码提交之前触发git hook(git在客户端的钩子),然后执行pnpm run format来自动的格式化我们的代码。

1.5.4.1 安装 husky
pnpm install -D husky

npx husky-init
1.5.4.2 配置husky

.husky/pre-commit文件添加如下命令

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm run format

1.5.5 配置commitlint

对于我们的commit信息,也是有统一规范的,不能随便写,要让每个人都按照统一的标准来执行,我们可以利用commitlint来实现。

1.5.5.1 安装依赖
pnpm add @commitlint/config-conventional @commitlint/cli -D
1.5.5.2 配置 commitlint.config.cjs
module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 校验规则
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'style',
        'refactor',
        'perf',
        'test',
        'chore',
        'revert',
        'build',
      ],
    ],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72],
  },
}
1.5.5.3 添加脚本命令
//scripts添加脚本
"scripts": {
    "commitlint": "commitlint --config commitlint.config.cjs -e -V"
  },
1.5.5.4 配置husky
npx husky add .husky/commit-msg 
//在生成的commit-msg文件中添加下面的命令
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm commitlint

1.5.6 强制使用pnpm 包管理工具

在根目录创建scritps/preinstall.js文件,添加下面的内容

scritps/preinstall.js

if (!/pnpm/.test(process.env.npm_execpath || '')) {
  console.warn(
    `\u001b[33mThis repository must using pnpm as the package manager ` +
    ` for scripts to work properly.\u001b[39m\n`,
  )
  process.exit(1)
}

package.json

//scripts下添中配置参数
"scripts": {
	"preinstall": "node ./scripts/preinstall.js"
}

当我们使用npm或者yarn来安装包的时候,就会报错了。原理就是在install的时候会触发preinstall(npm提供的生命周期钩子)这个文件里面的代码。

标签:1.5,vue,stylelint,web,前端,eslint,pnpm,config,搭建
From: https://blog.csdn.net/weixin_38996079/article/details/140078607

相关文章

  • 【前端网页游戏开发】Vue3+PixiJS开发2D闯关打怪游戏,开发时长为6天,成功推出v1.0正式版
    更新内容增加了地图切换功能,扩展了游戏的游玩长度,进入每一关时,击杀10只怪物就会提示通关成功,进入下一关,点击按钮后会恢复玩家的血量,然后重新生成怪物,如果玩家死亡,就会回到提示回到主界面点击后游戏最后增加了BOSS,在玩家进入第四关时会出现BOSS角色,血量为20,玩家伤害为攻击......
  • webpack内置插件
    所有的webpack内置插件都作为webpack的静态属性存在的,使用下面的方式即可创建一个插件对象constwebpack=require("webpack")newwebpack.插件名(options)DefinePlugin全局常量定义插件,使用该插件通常定义一些常量值,例如:newwebpack.DefinePlugin({PI:`Math.PI`,/......
  • 七、若依--P17--P18【黑马程序员Java最新AI+若依框架项目开发新方案视频教程,基于RuoYi
    学习视频【黑马程序员Java最新AI+若依框架项目开发新方案视频教程,基于RuoYi-Vue3前后端分离版本,从前端到后端再到AI智能化应用全通关】https://www.bilibili.com/video/BV1pf421B71v/?p=6&share_source=copy_web&vd_source=3949d51b57b2891ea14d6e51c792bef6二次开发P17:新......
  • 【九】【QT开发应用】WebRTC的sigslot源码和使用WebRTC的sigslot使用编写信号槽
    WebRTC(WebReal-TimeCommunication)是一个开源项目,提供实时通信能力,广泛应用于视频、音频和数据传输。在WebRTC的实现中,sigslot库用于信号和槽机制,以实现事件驱动的编程模型。WebRTC的sigslot部分主要实现了信号和槽的机制,用于简化组件之间的通信和事件处理。WebRTC使用si......
  • python创建websocket服务器,实现循环发送消息
    WebSocket协议是在2008年由Web应用程序设计师和开发人员创建的,目的是为了在Web浏览器和服务器之间提供更高效、更低延迟的双向通信。它允许客户端和服务器在任何时候发送消息,无需重新建立TCP连接。WebSocket可以在Web浏览器和服务器之间传输文本和二进制数据,使得构建实时Web......
  • ubuntu gitlab+frp 映射 版本管理平台搭建
    环境准备站点服务器:ubuntuserver22LST,RAM4G+(不然很可能502)个人PC:Vscode,git,xshell远程工具站点服务器云服务器,实体机子均可。再次动用家里的NAS-unraid开了一台ubuntu虚拟机,虚拟机用任意linux发行最新版本均可。搭建开始上一篇文章分享了hexo博客站点的搭......
  • Vue前端多图展示
    <el-table-columnlabel="图片"align="center"width="180px":show-overflow-tooltip="false"><template#default="scope"><el-imagefit="fill"style="width:40px;h......
  • Depth Anything环境搭建&推理测试
    ​引子基于单目摄像头的深度估计,一直是CV领域的一个难点,之前也对此关注也不够多。偶然浏览技术博客,看到DepthAnything:UnleashingthePowerofLarge-ScaleUnlabeledData这个最新CVPR2024的工作。看到名字,大概也能猜出来这篇是致敬SegmentAnything(之前也分享过一篇这个主题......
  • 基于JavaWeb+Spring Boot的校友录管理与数据分析系统(论文)
    目录1绪论11.1研究背景11.2国内外研究现状21.2.1国内研究现状21.2.2国外研究现状31.3研究的目的和意义41.3.1研究目的41.3.2研究意义41.4论文的内容和结构52系统相关技术概述72.1Java技术简介72.2SpringBoot框架82.3MySQL数据库技术简介9......
  • 基于javaweb物流公司下单管理系统设计与实现
      博主介绍:黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书......