博客后台管理系统使用后的是基于Vue3+Vite+TS+ESLint+Prettier的开发，具体项目构建如下1、基于Vite创建vue-ts模板的项目骨架pnpmcreatevite项目名称--templatevue-ts2、安装ESLint、Prettier相关的ESLint:控制代码质量Prettier:控制代码风格2.1、安装ESLint、Prettier相关相关包pnpminstalleslinteslint-plugin-vueeslint-config-prettierprettiereslint-plugin-importeslint-plugin-prettiereslint

一、安装nodejs环境推荐最新稳定版本nodejs方式一：直接下载并安装nodejshttps://nodejs.org/en方式二：使用nodejs版本管理工具nvm下载安装nodejs注意：如果本机已经安装了nodejs版本，请先卸载再进行nvm安装nvm下载地址https://github.com/coreybutler/nvm-windows/releases使用nvm安装nodejsnvminstall16.16.0如果总是安装失败，建议将下载镜像源指向淘宝（这步也很重要，否则在安装node的时候会出现卡死，npm安装不成功的情况），打开nvm安装包下的settings.txt文件

创建项目项目创建安装eslintyarnaddeslint-D生成配置文件npxeslint--init安装其他插件yarnadd-Deslint-plugin-importeslint-plugin-vueeslint-plugin-nodeeslint-plugin-prettiereslint-config-prettiereslint-plugin-node@babel/eslint-parservue-eslint-parser修改.eslintrc.cjsmodule.exports={env:{browser:true,es2021:true,node:true,jest:tru

1、插件配置#版本根据实际情况而定npminstalleslintprettier--save-devnpminstall--save-deveslint-plugin-prettiernpminstall--save-deveslint-config-prettiernpminstall--save-deveslint-plugin-vuenpminstall--save-dev@babel/eslint-parser一开始用的是ESlint8以上的版本，后来一直报莫名其妙的错，就回退到7.5.0的版本。 2、在项目中引入文件夹.eslintrc.js（主要用来在rules中自定义规则）mo

VUE3照本宣科——eslint与prettierVUE3照本宣科系列导航前言一、eslint1.配置文件2.配置规则3.忽略错误二、prettier三、总结VUE3照本宣科系列导航1.VUE3照本宣科——认识VUE32.VUE3照本宣科——应用实例API与setup3.VUE3照本宣科——响应式与生命周期钩子4.VUE3照本宣科——内置指令与自定义指令及插槽5.VUE3照本宣科——路由与状态管理器6.VUE3照本宣科——eslint与prettier7.VUE3照本宣科——package.json与vite.config.js前言👨‍💻👨‍🌾📝记录学习成果，以便温故而知新“VUE3照本宣科”

编程规范ESLintPrettierESLint和Prettier配合解决代码格式化问题1.在VSCode搜索Prettier插件安装2.创建prettier配置文件3.在VSCode中设置3.1找到左下角设置图标，点击设置3.2但是对VSCode而言，默认一个tab等于4个空格，而ESLint希望一个tab为两个空格，此时还需要修改设置中修改数字为2：3.3当存在多个格式化工具时，例如存在prettier和volar时，在代码文件中右键->使用...格式化->选择prettier格式化3.4.ESLint和Prettier之间的冲突问题ESLint一个插件化的JavaScript代码检测工具

本文介绍eslint作用，基本配置，日常使用技巧一、需要哪一个eslint检查语法错误，格式问题并不重要prettier是格式化工具，保证代码美观vscode插件Eslint（务必安装），错误标红，保存的时候自动修正eslint错误二、安装和配置如果项目中一开始就没有配置，用下面的方法从零配置若项目中已经有别人配好的，可根据需要修改规则1、eslinteslint插件，初始化，生成.eslintrc.js或者.eslintrc.json文件在vue项目中使用，需要安装多一个插件eslint-plugin-vuenpmi-Deslinteslint-plugin-vue//在终端执行如下命令./

必不可少插件(名称可能不全)：1、Chinese(Simplified)(简体中文)Language2、Prettier-Codeformatter3、Vue3Snippets4、VueLanguageFeatures(Volar)5、gitgraph可选插件：5、AutoCloseTag6、VueThemePrettier格式化配置：按ctrl+shift+p，搜索setting进入用户设置（全局），添加下面规则："[vue]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"prettier.enable":true,"prett

下载插件ESLint和PrettierESLint进入setting.json中setting.json中配置{"editor.tabSize":2,"editor.linkedEditing":true,"security.workspace.trust.untrustedFiles":"open","git.autofetch":true,"workbench.editor.untitled.hint":"hidden","emmet.includeLanguages":{"editor.formatOnType":"true","editor.formatOnSave":"true"},

1、运行好后自动打开浏览器package.json中vite后面加上--open2、安装eslintnpmieslint-D3、运行eslint--init之后，回答一些问题，自动创建.eslintrc配置文件。npxeslint--init回答问题如下：使用eslint仅检查语法，还是检查语法及错误，选第二个使用的是什么模块，选第一个项目使用的是什么框架，选vue项目中使用TyoeScript，选yes项目运行在哪，选浏览器创建的配置类型需要什么类型的，选Javascript需要安装这些插件吗，检验ts语法，检验vue语法，选yes用什么包管理工具，我这里是npm安装完成项目中会多一个.es