备案成功后怎么建网站,广元市建设局网站首页,想学网络营销网站建设,阿里云网站怎么做ESLint 在所有的JavaScript 项目开发中我们都会接触到 ESLint 这个词#xff0c;ESLint 是个什么样的组件会给为项目做些什么吗#xff1f;ESLint 是一种检查语法错误以及代码是否按照预定规则编写的工具。ESLint 可以帮助开发者发现代码中潜在的错误。在Vue项目中Eslint一…
ESLint 在所有的JavaScript 项目开发中我们都会接触到 ESLint 这个词ESLint 是个什么样的组件会给为项目做些什么吗ESLint 是一种检查语法错误以及代码是否按照预定规则编写的工具。ESLint 可以帮助开发者发现代码中潜在的错误。在Vue项目中Eslint一般都会配合其他语法检测工具一起使用最经典的组合是Eslint Prettier 。 Eslint 和 Prettier 并不局限于 Vue.js而是掌握 JavaScript 的必备知识所以推荐给不懂 ESLint 的同学。即使你看了这篇文章你也会无法理解 ESLint 和 Prettier 的所有规则但是通过查看运行你可以完全理解 ESLint 和 Prettier 是做什么的。下面让我们通过实际检查操作而不是用文字解释来轻松理解 ESLint 的作用与使用。 目录 ESLint1 ESLint创建2 ESLint 规则设置3 ESLint验证设置4 ESLint格式化设置5 ESLint自动修复6 Prettier7 Babel8 airbnb 与 standard9 ESLint 中TypeSript设置 第一章 Vue3项目创建 1 Vue CLI 创建vue项目 第一章 Vue3项目创建 2 使用 Webpack 5 搭建 vue项目 第一章 Vue3项目创建 3 Vite 创建 vue项目 第二章 Vue3 基础语法指令 第三章 Vue Router路由器的使用 第四章 VUE常用 UI 库 1 ( element-plus,Ant ,naiveui,ArcoDesign) 第四章 VUE常用 UI 库 2 ( ailwind 后台框架) 第五章 Vue 组件应用 1( Props ) 第五章 Vue 组件应用 2 ( Emit ) 第五章 Vue 组件应用 3( Slots ) 第五章 Vue 组件应用 4 ( provide 和 inject ) 第五章 Vue 组件应用 5 (Vue 插件) 第六章 Pinia,Vuex与axios,VueUse 1Pinia 第六章 Pinia,Vuex与axios,VueUse 2(Vuex) 第六章 Pinia,Vuex与axios,VueUse 3VueUse 第六章 Pinia,Vuex与axios,VueUse 4axios 第七章 TypeScript 上 第七章 TypeScript 中 第七章 TypeScript 下 创建Trello 任务管理器 第八章 ESLint 与 测试 ( ESLint ) 1 ESLint创建
在Vue项目中导入ESLint组件ESLint官网 https://eslint.org/docs/latest/地址。
首先安装 ESLint
npm install eslint --save-dev
//安装vue项目中eslint插件
npm install eslint-plugin-vue --save-dev然后初始化 ESLint 配置文件
npm init eslint/config
或者
npx eslint --init? How would you like to use ESLint? ...To check syntax only //仅检查语法To check syntax and find problems //检查语法并发现问题//检查语法、发现问题并强制执行代码风格To check syntax, find problems, and enforce code style
//对项目代码质量要求不高的项目可以选择一和二
//选择“检查语法并发现问题”因为稍后我们还将使用 Prettier 来强制执行代码样式。? What type of modules does your project use? ...JavaScript modules (import/export)CommonJS (require/exports)None of these
//选择 JavaScript 模块主要是因为 Vue3 使用它们。? Which framework does your project use? ...ReactVue.jsNone of these
//选择Vue项目//选择是否验证TypeScript语法? Does your project use TypeScript? » No / Yes
//项目没有使用TypeScript选择no//你的代码在哪里运行
? Where does your code run? ... (Press space to select, a to toggle all, i to invert selection)
√ Browser
√ Node
//选择Browser“浏览器”因为 Vue项目需要在浏览器上运行web项目如果是桌面或者是app选择Node。//您希望您的配置文件采用什么格式
? What format do you want your config file to be in? … JavaScriptYAML
▸ JSON
//开发中一般会使用JavaScript与JSON作为配置 .eslintrc文件格式。eslint-plugin-vuelatest typescript-eslint/eslint-pluginlatest typescript-eslint/parserlatest//你想现在用 npm 安装它们吗 选择是
? Which package manager do you want to use? ...npmyarnpnpm
执行完成后将在项目中新创建一个 .eslintrc.cjs 文件。
项目|---node_modules|---src |---.eslintrc.cjs ESLint配置文件 |---package.json 项目组件文件|---vite.config.js vite配置文件接下来在项目中的 package.json 文件中添加以下脚本。
scripts: {lint: eslint --ext .js,.vue src
}最后可以在终端中运行 npm run lint 命令来检测代码。
npm run lintvue-line0.0.0 lint eslint --ext .js,.vue src在 ESLint 初始化成功后在项目中出现一个.eslintrc.js文件文件内容如下。
module.exports {env: {browser: true,es2021: true},extends: [eslint:recommended,plugin:vue/vue3-essential],overrides: [],parserOptions: {ecmaVersion: latest,sourceType: module},plugins: [vue],rules: {}
}你可以在 package.json 文件中检查到eslint与eslint-plugin-vue导入的规则版本。
{......devDependencies: {vitejs/plugin-vue: ^4.0.0,eslint: ^8.32.0,eslint-plugin-vue: ^9.9.0,vite: ^4.0.0}
}2 ESLint 规则设置 在项目根目录下的**.eslintrc.cjs文件中的extends**属性中定义了项目使用的规则组件。以后与ESLint有关的其他规则组件都需要在extends中进行加入后边会涉及的Prettier 组件也会在extends中设置。只有在extends中引入的规则组件才会在ESLint检测的中被使用到。
eslint:recommended 是ESLint的原始规则。plugin:vue/vue3-essential 是vue语法模板规则。
extends: [eslint:recommended,plugin:vue/vue3-essential
],从ESLint文档https://eslint.org/docs中查看“eslint:recommended”应用的验证规则内容。 从eslint-plugin-vue官网上https://eslint.vuejs.org/rules/查看到Vue的验证规则内容。
为了验证规则的有效性我们将App.vue文件中的代码进行了修改。
script setup
import HelloWorld from ./components/HelloWorld.vue
let msg测试验证lint;
/script
template
/template
style scoped
/style执行lint语法检测功能编辑器会提示一些语法规则检测错误信息。
npm run lintvue-line0.0.0 linteslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue2:8 error HelloWorld is defined but never used no-unused-vars3:5 error msg is assigned a value but never used no-unused-vars5:1 error The template requires child element vue/valid-template-root
✖ 3 problems (3 errors, 0 warnings)上面前两个编译失败发生错误的“no-unused-vars”提示是由于ESLint 规则检测到的。ESLint 规则的与 vue 规则不同开头没有“vue/”的错误提示都是ESLint中的原始规则错误。 vue/valid-template-root是eslint-plugin-vue检测出来Vue语法错误的规则提示。
在ESLint官网中查询到no-unused-vars错误信息内容没有未使用定义的变量。 在eslint.vuejs官网中可以查询到 vue/valid-template-root规则信息提示内容提示错误信息模板中没有内容。 3 ESLint验证设置 .eslintrc.js 文件中的rules属性是用于设置ESLint的验证的地方通过设置rules中的属性来控制整个ESLint检测内容例如关闭有冲突的规则关闭不想使用的规则缩进格式等等内容。下面我们要关闭上面出现错误提示的vue/valid-template-root规则编辑 .eslintrc.js 文件中的rules属性在rules属性里添加vue/valid-template-root并设置其值为offoff表示错误级别表示关闭验证。
module.exports {......plugins: [vue],rules: {//关闭vue/valid-template-root验证vue/valid-template-root:off}
}设置完成后再次执行 npm run lint命令编译成功后会发现错误提示中的vue/valid-template-root信息不见了。 npm run lintvue-line0.0.0 linteslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue2:8 error HelloWorld is defined but never used no-unused-vars3:5 error msg is assigned a value but never used no-unused-vars错误级别除了“off”之外还有“warn”警告和“error”错误都是规则的设置值。设置为error会导致编译失败。如果设置为warn会显示警告信息但是编译会正常运行。为了开发调试方便将项目中的console与debugger错误关闭在项目发布打包的时候可以将这个检测在打开。 rules: {vue/valid-template-root:offno-console: process.env.NODE_ENV production ? error : off,no-debugger: process.env.NODE_ENV production ? error : off},4 ESLint格式化设置 ESLint 也可以用作格式化程序代码格式化所以我也会检查如何设置它。通过使用格式化程序您可以设置缩进并统一整个项目文件中是否存在引号和分号。 使用 ESLint 规则将缩进从 2 更改为 4。格式化程序也可以写在 .eslintrc.js 文件中。设置是在一个数组中进行的在第一个元素中设置错误级别在第二个元素中设置设置值。
module.exports {......plugins: [vue],rules: {vue/valid-template-root:off,no-console: process.env.NODE_ENV production ? error : off,no-debugger: process.env.NODE_ENV production ? error : off,//格式化验证缩进4行indent: [error, 4]}
}在这里我们将检查缩进设置。查看 App.vue 文件当前缩进为 2。
script setup
let msg测试验证lint;
const onfind(){
//当前缩进为2空格 alert(1);
}
/script
templatediv clickonfind我格式缩进2格/div
/template
style scoped
/style 执行lint语法检测命令编辑器会出现编译错误。第 5-1 行是错误的因为它们只缩进了 2 格正确的缩进4个空格。
npm run lintvue-line0.0.0 linteslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue2:5 error msg is assigned a value but never used no-unused-vars5:1 error Expected indentation of 4 spaces but found 2 indentvue模板格式设置 这个时候你会发现在App.vue代码中的规则验证只对script标签中的代码缩进4格规则进行了检测但是template标签里面的HTML缩进并没有进行规则检测。你要对模板中的HTML缩进进行验证就需要在 .eslintrc.js文件中设置模板的验证项加入 vue/html-indent 规则验证改模板标签的缩进。
module.exports {......plugins: [vue],rules: {vue/valid-template-root:off,indent: [error, 4],//模板格式设置vue/html-indent: [error, 4]}
}执行lint语法检测命令就会看到针对template标签里面的HTML缩进的错误提示了。 npm run lintvue-line0.0.0 linteslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue2:5 error msg is assigned a value but never used no-unused-vars5:1 error Expected indentation of 4 spaces but found 2 indent9:1 error Expected indentation of 4 spaces but found 0 spaces vue/html-indent第 9-1 行是错误提示没有缩进4个空格。
5 ESLint自动修复
我们可以在代码中来修改缩进4个空格的错误但是有的时候代码量巨大的时候这就是一个艰巨的任务。在ESLint指令中提供了一个自动修复错误的指令可以帮助我们轻松解决这个问题。在npm run lint后边加上-- --fix参数。
npm run lint -- --fix运行命令对项目中所有的代码进行检测与修复。
npm run lint -- --fixvue-line0.0.0 linteslint --ext .js,.vue src --fix
D:\vue\vue-line\src\App.vue2:5 error msg is assigned a value but never used no-unused-varsApp.vue中的代码缩进格数都变成了4格。
script setup
let msg测试验证lint;
const onfind(){
//当前缩进为2空格 alert(1);
}
/script
templatediv clickonfind我格式缩进2格/div
/template
style scoped
/style6 Prettier
Prettier是一款超强的代码格式化工具与ESLintTSLint等各种格式化工具不同的是Prettier只检测代码格式化的格式问题而不关心语法问题。所以在项目中可以单独用ESLint检测代码的质量但由于ESLint专门针对语法进行分析所以有些代码部分会覆盖不到这个时候需要使用到Prettier来进行代码的格式检测了。
npm install prettier --save-dev
npm install vue/eslint-config-prettier eslint-plugin-prettier --save-devprettier prettier格式化。eslint-config-prettier 它提供了一个设置来关闭所有 Prettier 可以覆盖的 ESLint 规则解决 ESLint 与 Prettier 冲突。vue/eslint-config-prettier 用与Vue 项目中它禁用了所有与 Prettier 冲突的 ESLint 规则以保证 Prettier 的代码格式化功能在Vue项目中可以正常工作。
在package.json 文件中会看到新增加“vue/eslint-config-prettier”、“eslint-plugin-prettier”、“prettier”三个包。
{devDependencies: {vitejs/plugin-vue: ^4.0.0,vue/eslint-config-prettier: ^7.0.0,eslint: ^8.33.0,eslint-plugin-prettier: ^4.2.1,eslint-plugin-vue: ^9.9.0,prettier: ^2.8.3,vite: ^4.0.0}
}在ESLint的 配置文件.eslintrc.cjs中extends属性中加入“vue/prettier”格式化组件。
module.exports {......extends: [eslint:recommended,plugin:vue/vue3-essential,vue/prettier],
} 运行检测指令会发现 prettier 组件检测到代码中所有的格式化的错误信息。例如代码结尾“;”冒号提示双引号改成了单引号代码的缩进不规范等等问题。
npm run lintvue-line0.0.0 linteslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue2:5 error msg is assigned a value but never used no-unused-vars2:8 warning Replace 测试验证lint with ··测试验证lint; prettier/prettier3:13 warning Replace () with ··()·· prettier/prettier4:1 warning Replace //当前缩进为2空格···· with ··//当前缩进为2空格 prettier/prettier 5:1 error Expected indentation of 4 spaces but found 2 indent6:2 warning Insert ; prettier/prettier11:15 warning Delete ⏎ prettier/prettier
D:\vue\vue-line\src\main.js1:27 warning Replace vue with vue; prettier/prettier2:8 warning Replace ./style.css with ./style.css; prettier/prettier3:17 warning Replace ./App.vue with ./App.vue; prettier/prettier5:22 warning Replace #app) with #app); prettier/prettier
✖ 15 problems (3 errors, 12 warnings)1 error and 12 warnings potentially fixable with the --fix option. 当运行自动自动修正指令后 Prettier组件也会做同样的事情。Prettier 会根据默认规则自动修正vue项目中的代码而无需手工修改代码格式。 npm run lint -- --fixvue-line0.0.0 linteslint --ext .js,.vue src --fix
D:\vue\vue-line\src\App.vue2:5 error msg is assigned a value but never used no-unused-vars4:3 warning Delete ·· prettier/prettier5:1 error Expected indentation of 4 spaces but found 2 inden✖ 4 problems (3 errors, 1 warning)1 error and 1 warning potentially fixable with the --fix option. 可以看到App.vue中的代码格式已经变得符合规范了无需我们自己手动调整代码格式。
script setup
let msg 测试验证lint;
const onfind () {//当前缩进为2空格alert(1);
};
/script
templatediv clickonfind我格式缩进2格/div
/template
style scoped/style1 .prettierrc文件配置
在 Vue 项目安装文件夹中创建一个Prettier的配置文件 .prettierrc。.prettierrc 文件是Prettier组件的配置文件用于配置Prettier的格式化规则如换行符、默认缩进2行尾分号双引号等格式。在.prettierrc文件中根据项目实际情况来定义自己的定义检测项目。
项目|---node_modules|---src |---.eslintrc.cjs ESLint配置文件|---.prettierrc Prettier配置文件 |---package.json 项目组件文件|---vite.config.js vite配置文件在.prettierrc文件中写入一下配置。
{tabWidth: 4, //缩进宽度semi: false,//代码结尾不使用;号singleQuote: true //使用单引号而不是双引号
}在官网中可以https://prettier.io/docs/en/options.html查看到全部的检测格式说明。 运行 npm run lint 查看到代码格式错误提示。 npm run lintvue-line0.0.0 linteslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue2:5 error msg is assigned a value but never used no-unused-vars2:11 warning Replace 测试验证lint; with 测试验证lint prettier/prettier4:1 warning Replace ·· with ···· prettier/prettier4:1 error Expected indentation of 4 spaces but found 2 indent5:1 warning Replace ··alert(1); with ····alert(1) prettier/prettier5:1 error Expected indentation of 4 spaces but found 2 indent9:1 warning Insert ·· prettier/prettier✖ 8 problems (4 errors, 4 warnings)2 errors and 4 warnings potentially fixable with the --fix option.同样可以使用npm run lint – --fix指令自动修复代码格式规则。
npm run lint -- --fixvue-line0.0.0 linteslint --ext .js,.vue src --fix
D:\vue\vue-line\src\App.vue2:5 error msg is assigned a value but never used no-unused-vars
✖ 2 problems (2 errors, 0 warnings)App.vue中的代码发生变化格式错误被修复。代码中的;号消失了双引号变成引号缩进变成4格。
script setup
let msg 测试验证lint
const onfind () {//当前缩进为2空格alert(1)
}
/script
templatediv clickonfind我格式缩进2格/div
/template
style scoped/style2 .eslintrc.cjs 中设置Prettier配置
可以在.eslintrc.cjs 文件中来配置.prettierrc中的相同功能。这样在项目中就不需要使用**.prettierrc**配置文件来设置格式检测规则可以使项目更加整洁一些。
module.exports {env: {browser: true,es2021: true},extends: [eslint:recommended,plugin:vue/vue3-essential,vue/prettier],overrides: [],parserOptions: {ecmaVersion: latest,sourceType: module},plugins: [vue],rules: {vue/valid-template-root:off,no-console: process.env.NODE_ENV production ? error : off,no-debugger: process.env.NODE_ENV production ? error : off,//prettier验证设置prettier/prettier: [error,{tabWidth: 2,singleQuote: false,semi: true,},],}
}7 Babel
Babel是种JavaScript代码编译器它可以将ES6、ES7、ES8等的代码转换为ES5代码更好理解的说法就是将node语法代码转换成可以在浏览器中运行的javascript代码。Babel可以和ESLint组合在一起来完成vue项目中的代码质量检测Babel做代码的转换工作ESLint做代码中的语法错误检查和修复。
将它们两个组合在一起可以实现代码的静态分析与检测排查可能出现的问题与风险点它会将node语法代码和css样式html模板样式在不启动服务器执行的情况下就可以检测到整个项目代码中潜在的问题。Babel与ESLint组件在集成到项目的时候需要引入多种类型的babel组件可以在官网中找到你要使用的编译的对应类型组件。如果项目版本较低可以使用babel-eslint组件。Babel的官方网址https://babeljs.io/。
1 在项目中导入babel依赖组件。
npm install babel/core babel/eslint-parser --save-dev
npm install babel/preset-env --save-dev
npm install babel/preset-react --save-dev2 在**.eslintrc.cjs**文件中的设置babel信息parser属性中配置babel/eslint-parser可以在parserOptions属性中设置其他配置选项。
requireConfigFile false 允许babel/eslint-parser 在没有 Babel 配置的文件的情况下运行。babelOptions Babel 解析器的配置对象代替配置文件的配置Babel 基础设置项目。
module.exports {env: {browser: true,es2021: true},extends: [eslint:recommended,plugin:vue/vue3-essential,vue/prettier],overrides: [],//vue-eslint-parserparserOptions: {ecmaVersion: latest,sourceType: module,//无配置文件模式requireConfigFile: false,//ESLint集成babel插件parser: babel/eslint-parser,//babel配置信息设置babelOptions: {babelrc: false,configFile: false,//babel使用什么类型的编辑器组件presets: [babel/preset-env], parserOpts: {plugins: [jsx]}} },plugins: [vue],rules: {}
}App.vue文件中的代码内容我们使用ESLintPrettier与Babel进行质量检测。
script setup
const msg测试验证lint
const onfind () {
// 当前缩进为2空格
alert(1)
}
/script
template
div clickonfind我格式缩进2格/div
/template
style scoped运行npm run lint 指令验证Babel是否配置成功后端没有异常有检测语法错误提示出来表示Babel组件集成成功。
npm run lint vue-line0.0.0 linteslint --ext .js,.vue srcD:\vue\vue-line\src\App.vue2:7 error msg is assigned a value but never used no-unused-vars2:10 warning Replace 测试验证lint with ··测试验证lint; prettier/prettier3:15 warning Replace () with ·()· prettier/prettier4:1 warning Insert ·· prettier/prettier5:1 warning Replace alert(1) with ··alert(1); prettier/prettier6:2 warning Insert ; prettier/prettier9:1 warning Insert ·· prettier/prettier12:5 warning Insert · prettier/prettier13:1 warning Replace font-size: with ··font-size:· prettier/prettierD:\vue\vue-line\src\components\HelloWorld.vue2:10 error ref is defined but never used no-unused-vars2:21 warning Replace vue with vue; prettier/prettier5:1 error The template requires child element vue/valid-template-rootD:\vue\vue-line\src\main.js1:27 warning Replace vue with vue; prettier/prettier2:8 warning Replace ./style.css with ./style.css; prettier/prettier3:17 warning Replace ./App.vue with ./App.vue; prettier/prettier5:22 warning Replace #app) with #app); prettier/prettier
✖ 16 problems (3 errors, 13 warnings) 如果将要使用Babel配置文件来设置Babel功能需要在**.eslintrc.cjs文件中requireConfigFile** 属性删除。在项目的根目录中创建**.babelrc文件在.babelrc**文件设置Babel功能项。
.babelrc文件中设置babel/preset-env组件内容.babelrc文件中的参数属性可以在官网查看。
{presets: [[babel/preset-env,{targets: {ie: 11,esmodules: true},useBuiltIns: usage,corejs: 3}]]} Babel 在编辑JavaScriptCSS,HTML,TyptSricpt其他模板语言的时候会用到它们对应的Babel 组件。我们需要在官网上查到这些对应语言的使用组件使用将它们导入到项目中在.babelrc文件中配置组件的插入就可以使用ESLintBabel模式来检查和提高代码质量了。
8 airbnb 与 standard
在上面介绍了PrettierBabel与ESLint集成使用的情况。但是在实际开发中配置ESLint与这些第三方组件联合使用的过程非常繁琐麻烦需要解决各种版本冲突和兼容性语言编译解析等等问题。当这些检测格式编译转录组件的规则配置信息数量庞大后组件之间的冲突与维护会变得非常困难。我们会把配置文件写的复杂又难以理解有的时候会出现各种奇怪的问题需要花费大量的时间去调试它们项目会变得非常难以维护。为了很好的解决上面的问题出现了一种整套的规则检测组件不需要在维护这些复杂的组件关系和它们在配置文件中的各种规则设置。我们直接导入一套规则组件在项目中只对这一套规则组件进行配置与维护。
现在比较流行的 standard 和 airbnb 两个规则组件它们是现阶段使用最多最流行整体实践效果最好的规则组件。我们只需要直接拿来使用它们的功能而不需要在设置其他组件来进行质量检验了。standard 和 airbnb检测组件可以很方便的帮助我们在项目中检查出代码中的可能错误和潜在问题以保证项目的质量和可维护性。如果你从来没有使用过 airbnb 之类的检测规则来检测过项目代码那么你编写的代码中的各个地方都有可能出现错误。
1 airbnb
导入airbnb组件到项目中来它的验证规则属性可以在https://github.com/lin-123/javascript中查看到。
npm install --save-dev vue/eslint-config-airbnb
npm install --save-dev eslint-config-airbnb-base在ESLint的配置文件.eslintrc.cjs 中的extends属性里设置 ‘vue/airbnb’它可以同时设置使用多个规则组件内容。
module.exports {env: {browser: true,es2021: true},extends: [plugin:vue/vue3-essential,vue/airbnb,],overrides: [],parserOptions: {ecmaVersion: latest,sourceType: module},plugins: [vue],rules: {no-console: process.env.NODE_ENV production ? warn : off,no-debugger: process.env.NODE_ENV production ? warn : off,vuejs-accessibility/click-events-have-key-events: off, }
}
运行检测npm run lint检测指令可以看到项目代码已经运行airbnb中设置的验证规则了。
npm run lint
npm run lint -- --fixstandard使用
standard使用与airbnb 基本一样在项目中导入它的基础组件包和eslint兼容包在eslint中加载这个standard规则。standard中所有验证规则在https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md#javascript-standard-style中查看到。
npm install standard --save-dev
npm install vue/eslint-config-standard --save-dev
//加入.eslintrc.cjs 文件中
module.exports {extends: [plugin:vue/vue3-essential,vue/standard],
}
//检测与自动修复
npm run lint
npm run lint -- --fix大家在实际的开发中可以根据自己项目情况来选择最适合的组合方式。 ESLint ESLintPrettier ESLintPrettierBabel ESLintairbnb ESLintstandard
9 ESLint 中TypeSript设置
TypeSript类型的项目中加入ESLint的TypeSript规则检测第一种方式是通过初始化eslint来导入TypeSript检测所需要的包
npm init vitelatest ESLint-TypeSript
cd ESLint-TypeSript
npm install
//安装vue项目中eslint插件
npm install eslint --save-dev
//安装vue项目中eslint插件
npm install eslint-plugin-vue --save-dev
npm init eslint/config? How would you like to use ESLint? ...To check syntax only //仅检查语法To check syntax and find problems //检查语法并发现问题
? What type of modules does your project use? ...JavaScript modules (import/export)? Which framework does your project use? ...ReactVue.js
? Does your project use TypeScript? » No / Yes ? Where does your code run? ... (Press space to select, a to toggle all, i to invert selection)
√ Browser
? Which package manager do you want to use? ...npmyarnpnpm已有eslint项目中可以不使用初始化的方式来创建typescript-eslint可以直接使用npm导入的方式导入typescript-eslint规则验证包。
npm install --save-dev eslint typescript-eslint/parser typescript-eslint/eslint-plugin eslint-plugin-vuetypescript-eslint/parser 允许 ESLint 加载 Typescript 的解析器。typescript-eslint/eslint-plugin 为 Typescript 提供 Lint 规则的插件。
.eslintrc.cjs文件设置
在.eslintrc.cjs文件中的parserOptions元素中加入parser属性和值typescript-eslint/parser在语法检测的时候可以检测typesrcipt语法内容。
module.exports {env: {browser: true,es2021: true},extends: [eslint:recommended,plugin:vue/vue3-essential,plugin:typescript-eslint/recommended,],overrides: [],parser: vue-eslint-parser,parserOptions: {ecmaVersion: latest,sourceType: module,parser: typescript-eslint/parser,},plugins: [vue],rules: {}
}“parser”: “vue-eslint-parser” 这句很重要必须要加上。
lint: eslint --ext .js,.vue,.ts src
lint: eslint . --ext .vue,.js,.ts,.jsx,.tsx --fixprettier配置文件的写法。
module.exports {env: {browser: true,es2021: true},extends: [eslint:recommended,plugin:vue/vue3-essential,plugin:typescript-eslint/recommended,vue/prettier,],overrides: [],parser: vue-eslint-parser,parserOptions: {ecmaVersion: latest,sourceType: module,parser: typescript-eslint/parser,},plugins: [vue,typescript-eslint],rules: {}
}standard 规则引入
在eslinttypescript项目环境中加入standard规则组件需要先引入standard-with-typescript包到项目中来。
npm install vue/eslint-config-standard-with-typescript --save-dev module.exports {env: {browser: true,es2021: true},extends: [plugin:vue/vue3-essential,vue/eslint-config-standard-with-typescript],overrides: [],parser: ,parserOptions: {ecmaVersion: latest,sourceType: module,},plugins: [vue],rules: {//关闭引入规则 vite/client, use import style insteadtypescript-eslint/triple-slash-reference: off}
}
