一概述
在使用VScode开发Vue项目中，经常遇到各种格式问题，Eslint的格式经常报错，又设置不到，所以记下这个，先从介绍插件，在介绍搭配，在进行配置，用最完美的方式打造最好的开发环境
二、插件介绍
2.1 Eslint
Eslint是JavaScript检测工具
2.2Vetur
VSCode 里安装 Vetur 有什么用？
VSCode里安装Vetur可以将“.vue”文件中的语法进行高亮显示，Vetur不仅支持Vue中的template模板以外，还支持大多数主流的前端开发脚本和插件，比如Sass、TypeScript、Jade和Less等等。
如果没有安装Vetur，在VScode中开发Vue项目，.vue文件不会高亮，全是灰色字体
vetur 的代码提示不支持任何配置, 建议安装ESLint.
Vetur格式化的标准js文件不符合ESlint规范，会给你加上双引号、分号等
2.2.1详细
Vetur只支持整个文档格式化, 不支持选中某个片段格式化
Vetur内嵌了如下格式化工具, 如果本地安装了相应版本, 则会使用本地安装的版本, 默认配置如图
- prettier: For css/scss/less/js/ts.
- prettier-eslint: For js. Run prettier and eslint --fix.
- prettyhtml: For html.
- stylus-supremacy:For stylus.
- vscode-typescript: For js/ts. The same js/ts formatter for VS Code.
- sass-formatter: For the .sass section of the files.
ESLint主要负责: 质量检查(例如使用了某个变量却忘记了定义)、风格检查
后面用到的Prettier主要负责: 风格检查, 没有质量检查
2.3 eslint-plugin-vue
vetur默认集成了一个eslint-plugin-vue版本来对提示
也可自己安装一个新的版本. 如果自己安装一个新的版本
2.4 Prettier - Code formatter
只关注格式化，并不具有eslint检查语法等能力，只关心格式化文件(最大长度、混合标签和空格、引用样式等)，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown
三、插件总结
总的来说，我们应该安装Vetur和Eslint，而其他插件如Prettier我们主要使用Vetur内嵌的，下列表格总结一下
| 插件 | |
|---|---|
| Eslint | 对JavaScript代码风格质量检测，不纠错 |
| Vetur | 支持所有文件格式化，html、js、css等等 |
四、搭配（Eslint+Vetur+js-beautify-html + vscode-typescript）
在Vue项目中，我们的eslint经常报错，主要就是分号，tab空格几个，函数后面()是否空格等等的报错
为了解决这些，并且自动格式化，我们主要使用的工具：
- Vetur
- Eslint
- VScode自带的vscode-typescript
- js-beautify-html
得到各文件的格式化工具：
- html：js-beautify-html
- js:vscode-typescript
五、配置文件
主要两个：
一个setting.json（vscode自带）
一个项目中.eslintrc.js
5.1 先说setting.json配置
{
// 默认配置
// "vetur.format.defaultFormatter.html": "prettyhtml", // html格式化
"vetur.format.defaultFormatter.css": "prettier", // css
"vetur.format.defaultFormatter.postcss": "prettier", // postcss
"vetur.format.defaultFormatter.scss": "prettier", // scss
"vetur.format.defaultFormatter.less": "prettier", // less
"vetur.format.defaultFormatter.stylus": "stylus-supremacy", //stylus
// "vetur.format.defaultFormatter.js": "prettier", // 重新设置
"vetur.format.defaultFormatter.ts": "prettier", // ts
"vetur.format.defaultFormatter.sass": "sass-formatter", // sass
"editor.tabSize": 2,
// // #每次保存的时候自动格式化
"editor.formatOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
// #每次保存的时候将代码按eslint格式进行修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto",
"wrap_line_length": 120,
// #vue组件中html代码格式化样式
}
},
// "window.zoomLevel": 0,
// 设置是否进行删除确认
"explorer.confirmDelete": false,
// 设置移动文件进行确认
"explorer.confirmDragAndDrop": false,
"editor.renderControlCharacters": true,
"editor.renderWhitespace": "all",
"editor.detectIndentation": false,
"workbench.editor.enablePreview": false,
// 关闭右侧预览
"editor.minimap.enabled": false
}
5.2 .eslintrc.js的内容默认就好
/**
* 参考文档
* 【eslint英文文档】https://eslint.org/docs/user-guide/configuring
* 【eslint中文文档】http://eslint.cn/docs/rules/
*/
/**
* 文件内局部设置
* 【】eslint可以具体文件中设置特定代码的规则，常用于跳过某条语句的检测。
* 【】注销全部规则，在代码前新建一行，添加注销 /* eslint-disable *\/ 。如果没有恢复设置的语句，则下列全部代码都会跳过检测。
* 【】恢复eslint，在代码前新建一行，添加注销 /* eslint-enable *\/
* 【】指定忽略的规则，/* eslint-disable no-alert, no-console *\/
* 【】在特定行禁用，// eslint-disable-line
* 【】在下一行禁用，// eslint-disable-next-line
*/
module.exports = {
/**
* 根目录标识
* http://eslint.cn/docs/user-guide/configuring#using-configuration-files
* http://eslint.cn/docs/user-guide/configuring#configuration-cascading-and-hierarchy
* 【】标识当前配置文件为最底层的文件，无需往更上一级的文件目录中进行搜索
* 【】默认eslint的配置文件搜索方式是，从目标文件夹进行搜索，遍历内部每一个文件夹，找到配置文件并层叠使用。再跳出本项目，往祖先文件夹进行遍历
* 【】注意「~/.eslintrc」的意义，「~」是指linux上的家目录，「~/.eslintrc」是指家目录下的eslint配置文件，用于私人开发者，用于整个电脑全局约束的。这个配置通过本配置项root去设置，设置了root,eslint检测时将不会再往上搜索
* 【】eslint的生效规则是就近使用，越近的配置项优先级越高，覆盖其他配置项。如一个项目中，可以在不同文件夹中都添加配置文件，这些规则将重叠组合生效
*/
root: true,
/**
* 解析器
* http://eslint.cn/docs/user-guide/configuring#specifying-parser
* 【】ESLint 默认使用Espree作为其解析器
* 【】解析器必须是本地安装的一个 npm 模块。即必须按照在本地的node_module中
* 【】解析器是用于解析js代码的，怎么去理解每一个表达式，有点C++中编译器的概念，会对js进行一些语法分析，语义分析什么的，才能判断语句符不符合规范。而不是通过简单的字符串对比。
* 【】解析器有很多，但兼容eslint的解析器有以下几个
* Espree：默认解析器，一个从Esprima中分离出来的解析器，做了一些优化
* Esprima：js标准解析器
* Babel-ESLint： 一个对Babel解析器的包装，babel本身也是js解析器的一种（不然怎么能转化为兼容性代码呢？首先需要进行js解析，才能转化）。如果我们的代码需要经过babel转化，则对应使用这个解析器
* typescript-eslint-parser(实验) - 一个把 TypeScript 转换为 ESTree 兼容格式的解析器
*/
/**
* 解析器配置项
* http://eslint.cn/docs/user-guide/configuring#specifying-parser-options
* 【】这里设置的配置项将会传递到解析器中，被解析器获取到，进行一定的处理。具体被利用到，要看解析器的源码有没有对其进行利用。这里仅仅做了参数定义，做了规定，告诉解析器的开发者可能有这些参数
* 【】配置项目有：
* "sourceType": "module", // 指定JS代码来源的类型，script(script标签引入？) | module（es6的module模块），默认为script。为什么vue的会使用script呢？因为vue是通过babel-loader编译的，而babel编译后的代码就是script方式
* "ecmaVersion": 6, // 支持的ES语法版本，默认为5。注意只是语法，不包括ES的全局变量。全局变量需要在env选项中进行定义
* "ecmaFeatures": { // Features是特征的意思，这里用于指定要使用其他那些语言对象
"experimentalObjectRestSpread": true, //启用对对象的扩展
"jsx": true, //启用jsx语法
"globalReturn":true, //允许return在全局使用
"impliedStrict":true //启用严格校验模式
}
*/
parserOptions: {
parser: 'babel-eslint',
},
/**
* 运行环境
* http://eslint.cn/docs/user-guide/configuring#specifying-environments
* 【】一个环境定义了一组预定义的全局变量
* 【】获得了特定环境的全局定义，就不会认为是开发定义的，跳过对其的定义检测。否则会被认为改变量未定义
* 【】常见的运行环境有以下这些，更多的可查看官网
* browser - 浏览器环境中的全局变量。
* node - Node.js 全局变量和 Node.js 作用域。
* es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
* amd - 将 require() 和 define() 定义为像 amd 一样的全局变量。
* commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
* jquery - jQuery 全局变量。
* mongo - MongoDB 全局变量。
* worker - Web Workers 全局变量。
* serviceworker - Service Worker 全局变量。
*/
env: {
// browser: true, // 浏览器环境
node: true
},
/**
* 全局变量
* http://eslint.cn/docs/user-guide/configuring#specifying-globals
* 【】定义额外的全局，开发者自定义的全局变量，让其跳过no-undef 规则
* 【】key值就是额外添加的全局变量
* 【】value值用于标识该变量能否被重写，类似于const的作用。true为允许变量被重写
* 【】注意：要启用no-global-assign规则来禁止对只读的全局变量进行修改。
*/
// globals: {
// // gTool: true, // 例如定义gTool这个全局变量，且这个变量可以被重写
// },
/**
* 插件
* http://eslint.cn/docs/user-guide/configuring#configuring-plugins
* 【】插件同样需要在node_module中下载
* 【】注意插件名忽略了「eslint-plugin-」前缀，所以在package.json中，对应的项目名是「eslint-plugin-vue」
* 【】插件的作用类似于解析器，用以扩展解析器的功能，用于检测非常规的js代码。也可能会新增一些特定的规则。
* 【】如 eslint-plugin-vue，是为了帮助我们检测.vue文件中 <template> 和 <script> 中的js代码
*/
// plugins: [
// 'vue'
// ],
/**
* 规则继承
* http://eslint.cn/docs/user-guide/configuring#extending-configuration-files
*【】可继承的方式有以下几种
*【】eslint内置推荐规则，就只有一个，即「eslint:recommended」
*【】可共享的配置， 是一个 npm 包，它输出一个配置对象。即通过npm安装到node_module中
* 可共享的配置可以省略包名的前缀 eslint-config-，即实际设置安装的包名是 eslint-config-airbnb-base
*【】从插件中获取的规则，书写规则为 「plugin:插件包名/配置名」，其中插件报名也是可以忽略「eslint-plugin-」前缀。如'plugin:vue/essential'
*【】从配置文件中继承，即继承另外的一个配置文件，如'./node_modules/coding-standard/eslintDefaults.js'
*/
extends: [
'plugin:vue/essential',
'@vue/standard'
],
/**
* 针对特定文件的配置
* 【】可以通过overrides对特定文件进行特定的eslint检测
* 【】特定文件的路径书写使用Glob格式，一个类似正则的路径规则，可以匹配不同的文件
* 【】配置几乎与 ESLint 的其他配置相同。覆盖块可以包含常规配置中的除了 extends、overrides 和 root 之外的其他任何有效配置选项，
*/
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
],
rules: {
/**
* 具体规则
* 【】具体的规则太多，就不做介绍了，有兴趣的同学可以上eslint官网查
* 【】注意 xxx/aaa 这些规则是 xxx 插件自定的规则，在eslint官网是查不到的。需要到相应的插件官网中查阅
* 【】如 import/extensions，这是「eslint-plugin-import」自定义的规则，需要到其官网查看 https://github.com/benmosher/eslint-plugin-import
*/
// "indent": ['off', 4],
// 'no-console': 'off',
// 'no-debugger': 'off',
"no-unused-vars": [0, { "vars": "all", "args": "none" }],
'vue/no-unused-vars': 'off'
}
}
扫一扫
503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
