哪些网站可以做代理,室内设计网站源码下载,网站cps后台怎么做,注册公司选名字文章目录 vue3 vite 创建项目如果创建项目选了 eslint prettier从零教你使用 eslint prettier第一步#xff0c;下载eslint第二步#xff0c;创建eslint配置文件#xff0c;并下载好其他插件第三步#xff1a;安装 prettier安装后配置 eslint (2025/2/7 补充) 第四步 vite 创建项目如果创建项目选了 eslint prettier从零教你使用 eslint prettier第一步下载eslint第二步创建eslint配置文件并下载好其他插件第三步安装 prettier安装后配置 eslint (2025/2/7 补充) 第四步设置 prettier 规则注意 第五步修改 vscode 配置 注意eslint 配置element plusvite 使用 sass剩余 vue3 vite 创建项目
因为菜鸟使用了vite所以很显然已经完全不想回 webpack 的身边了可能人就是这样喜新厌旧然后菜鸟翻了一圈掘金没发现自己写过 vue3vite 的文章所以这里就先从这里讲起
菜鸟之前写的vue3webpackeslint|prettierelementplus国际化axios封装pinia感觉eslint|prettier部分没有写好所以这里重新搞了一下
创建项目
npm create vuelatest执行结果
注意 jsx 按需要引入 这里可以见差点因为性能优化而被优化虚拟化表格Virtualized Table性能优化
如果创建项目选了 eslint prettier
下载 eslint 和 prettier 插件下方《从零教你使用 eslint prettier 有截图》并直接在新建的项目下执行
npm i这个时候eslint就生效了但是现在vue3创建时会给你默认的配置这个时候只需要修改 eslint.config.js将rules加到后面即可如果放前面会被后面的覆盖 但是如果你创建项目时没有选 eslint prettier那就看看下面的吧
从零教你使用 eslint prettier
首先假如你是刚下载的vscode且你新建的项目没有选择 eslint prettier 这个时候该怎么办
第一步下载eslint
npm i eslint --save-dev第二步创建eslint配置文件并下载好其他插件
npx eslint --init创建过程如下 生成文件如下 这里暂时使用的都是默认的配置如果需要自己加配置可以这样加 这个时候 eslint 虽然生效了但是vscode并不会提示因为还差一个 eslint 插件 现在 eslint 基本上已经可以使用了但是要我们人为的一个一个去改这些报错就很难受这个时候 prettier 就该上线了
注意 eslint 报错不会影响项目运行以前webpack项目是会影响的原因如下 第三步安装 prettier
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev其中
安装后配置 eslint (2025/2/7 补充)
这里菜鸟已经换成了cjs的写法为什么换见element plus 使用问题
const globals require(globals);
const pluginJs require(eslint/js);
const pluginVue require(eslint-plugin-vue);
const autoImportConfig require(./.eslintrc-auto-import.json);module.exports [require(eslint-config-prettier),{files: [**/*.{js,mjs,cjs,vue}]},{ignores: [node_modules, dist, bin] // 忽略不需要检查的文件},pluginJs.configs.recommended,...pluginVue.configs[flat/essential],{languageOptions: {globals: {...globals.browser,...globals.node,...autoImportConfig.globals}}},{plugins: {prettier: require(eslint-plugin-prettier)}},{rules: {prettier/prettier: error, // 让 Prettier 报告格式错误并作为 ESLint 错误处理no-console: off,semi: [error, always],// avoidEscape: true 推荐添加quotes: [error, double, { avoidEscape: true }],vue/multi-word-component-names: 0}}
];第四步设置 prettier 规则
创建 .prettierrc.json 文件常用规则如下
{semi: true,singleQuote: false,tabWidth: 2,printWidth: 80,trailingComma: none
}但是完成上述操作后并不会自动格式化还需要你安装插件 安装完成后你可以右键点击格式化选择 prettier 进行格式化 但是菜鸟感觉还是不够智能要是能直接保存时自己格式化不是更香吗
注意 其实只要安装了 prettier - code formatter 这个插件就可以自动格式化但是使用的是这个插件里面的版本就是不是你自己下载的版本 第五步修改 vscode 配置
在vscode设置中找到在setting.json中编辑 添加如下代码
{editor.formatOnSave: true,editor.defaultFormatter: esbenp.prettier-vscode,[javascript]: {editor.defaultFormatter: esbenp.prettier-vscode},[vue]: {editor.defaultFormatter: esbenp.prettier-vscode},eslint.validate: [javascript, vue],eslint.run: onType,eslint.format.enable: true
}重启vscode你将获得很棒的体验
注意
不管是改eslint还是prettier都一定要重启IDE不然就会不生效让你感觉你配错了
eslint 配置
当你以为万事大吉开始开发的时候删除掉 vue 自带的文件并新建如菜鸟这样的文件时 你会发现报错这个 Component name xxxxx” should always be multi-word 这里的主要原因是 但是感觉这个规范确实不需要部分文件不是两个单词拼接只需要在 eslint.config.js 里面加上这一行 方便复制
vue/multi-word-component-names: 0,element plus
这里比较多直接提出成一篇文章了element plus使用问题
vite 使用 sass
vite天然支持postcss所以要使用sass也很简单直接
npm i sass即可开箱即用
剩余
剩余的感觉之前写的就可以回到之前的vue3webpackeslint|prettierelementplus国际化axios封装pinia
