eslint

ESLint+Prettier prettier只关注格式化 ,插件prettier-vscode,编辑器的配置setting.json会出现prettier插件的相关配置节点，同时也能看到一些默认的配置信息。 一定是下图这个搜出多个 安装成功后，编辑器默认的格式化处理就会被prettier代替， 默认快捷键是 alt + shift + f; 可以针对项目设置格式化参数，在项目根目录添加配置文件 .prettierrc 如格式化.vue文件时加分号，单引号给我变双引号需要在项目目录下增加 .prettierrc.json 更多选项查看 prettier官网 { "singleQuote":true,//使用单引号而不是双引号,true就是对 "semi":false//在语句结尾处打印分号,false就是不打印 } 插件ESLint在vscode中setting.json会出现ESLint的参数，有 eslintrc.js 配置文件 腾讯 AlloyTeam ESLint 配置https://github.com/AlloyTeam/eslint-config-alloy https://alloyteam.github.io/eslint-config-alloy/ 来源： oschina 链接： https://my.oschina.net/u/1431904/blog

vscode vue 格式化 最近重新搞了下电脑，重装了 vscode 软件，在用 vue 写项目的时候，照例开启了 ESLint 语法检查，但是发现在使用 vscode 格式化快捷键的时候（ shift+alt+F ）各种报错，单双引号，函数空格各种问题。因为 vscode 它自身的那个格式化插件是不匹配 ESLint 的。后来查阅了一些文档，解决问题如下： 一、安装 Vetur 在 vscode 软件商店里搜索插件 Vetur 现在的版本应该是 0.24.0 二、打开 配置文件 打开 vscode 软件 【文件】---【首选项】---【设置】按照下图点右上角那个小文件图标，会弹出一个 【settings.json】 文件。 三、默认配置 这是 vscode 原本的默认配置。 四、更改配置文件 按下图所示：红色箭头所指的 vue 配置注释掉，在蓝色箭头下加上如下代码。 "[vue]": { "editor.defaultFormatter": "octref.vetur" // 使用 vetur 格式化规则 }, "vetur.format.defaultFormatterOptions": { "prettier": { "semi": false, // 去掉分号 "singleQuote": true, // true 为使用单引号 }, }, "vetur.format

$dispatch和$broadcast源代码： function broadcast (componentName, eventName, params) { this .$children.forEach(child => { const name = child.$options.name // 组件名与传入componentName一致 if (name === componentName) { // 子组件触发eventName事件 child.$emit.apply(child, [eventName].concat(params)) } else { broadcast.apply(child, [componentName, eventName].concat([params])); // eslint-disable-line } }) } export default { methods: { // 向上触发事件 $dispatch (componentName, eventName, params) { // 获取父实例 let parent = this .$parent || this .$root // 获取组件名 let name = parent.$options.name // 递归查找与componentName一致的组件名 while

1.安装 webpack 和vue-cli 模块: npm install webpack -g --registry=https://registry.npm.taobao.org npm install vue-cli -g --registry=https://registry.npm.taobao.orgnpm install vue -g --registry=https://registry.npm.taobao.org或cnpm install --global vue-cli --registry=https://registry.npm.taobao.orgcnpm install --global vue --registry=https://registry.npm.taobao.org 2.进入到新建项目的目录里面执行以下命令新建项目: vue init webpack webpack_template　 3.然后进入到使用cd 命令进入到新建的webpack_template目录下面安装package.json中的模块 cnpm install --registry=https://registry.npm.taobao.org 4.然后执行命令看是否正常运行: npm run dev 5.使用WebStrom打开webpack_template项目: 6

1. ESLint 每行两个空格； 最后一行要一次回车； 2. 路由懒加载 当打包构建应用时，Javascript 包会变得非常大，影响页面加载。 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了 which is lazy-loaded when the route is visited. component : () => import ( /* webpackChunkName: "about" */ "../views/About.vue" ) 3. 数据绑定 <li :class="{ current: isActive, selectLi: isActive }" v-for="item in menutab" :key="item.id" > {{ item.txt }} </li> 在样式绑定:class="{ current : isActive, selectLi : isActive }"时， 其中样式不能加引号。 来源： oschina 链接： https://my.oschina.net/90design/blog/3216560

eslint是一种代码风格管理的工具，可以制定一些代码编写规范，在vue项目中经常用到 1、'layer' is defined but never used 这是定义了一个变量但是未使用到该变量，vue经常需要在全局进行声明，以便任何组件都能用到，但是经常会这样警告 可以在 .eslintrc.js 文件中修改配置，增加如下代码： "no-unused-vars":"off" rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', "no-tabs":"off", "no-unused-vars":"off" } 2、最多的经常会碰到空格报错，去掉空格报错增加如下代码 "no-irregular-whitespace":"off" 3.报错 Newline required at end of file but not found 解决办法就是在后面再加一行 4.报错信息： Expected error to be handled 这是因为回调函数里面的参数error没有运用到，所以可以不设置参数

User Settings： 一，当前行高亮显示： "editor.renderLineHighlight": "line", 二，如何呈现空白字符（一般选none，这样会比较清爽） "editor.renderWhitespace": "none" "editor.renderWhitespace": "all" 三， 窗口失去焦点自动保存 "files.autoSave": "onFocusChange", 四，通过使用鼠标滚轮同时按住 Ctrl 可缩放编辑器的字体 "editor.mouseWheelZoom": true, 五，图标的显示 "workbench.iconTheme": "vscode-great-icons", 六，主题色（这里选择了"Solarized Dark"） "workbench.colorTheme": "Default Dark+" 七，打开新窗口的页面（建议用“newUntitledFile”） "workbench.startupEditor": "newUntitledFile", "workbench.startupEditor": "welcomePage", { "workbench.colorTheme": "Solarized Dark", "editor.quickSuggestions": { "strings": true

配置了 alias ，但是 eslint 报错“不能解析这个导出”。 两种解决办法。 第一种： yarn add eslint-import-resolver-webpack --dev 　　 编辑 .eslintrc { "settings": { "webpack": { "config": "config/webpack.config.js" // 这是你设置alias的配置文件路径 } } } 现在就可以了 参考资料： https://github.com/houndci/hound/issues/1419# 方法二： 修改.eslintrc配置 在 rules 里面添加 "import/no-unresolved": [ 2, { "ignore": ["^@/"] // @ 是设置的路径别名 }, ], 　 来源： https://www.cnblogs.com/ly0612/p/12600156.html

我的使用vscode开发VUE的常用设置 1.安装插件 ESLint Vetur Beautify Prettier - Code formatter Auto Rename Tag -重命名标签，闭合标签自动修改 Auto Close Tag -自动生成闭合标签 2.配置 (设置保存文件时自动格式化成符合eslint规范的代码) 文件》首选项》setting.json { "editor.fontSize": 16, "typescript.referencesCodeLens.enabled": true, "typescript.implementationsCodeLens.enabled": true, "git.enableSmartCommit": true, "explorer.confirmDelete": false, // "window.zoomLevel": 1, // 窗口大小比例 // "editor.tabSize": 2, // "editor.detectIndentation": false, // "emmet.triggerExpansionOnTab": true, // "update.channel": "none", "editor.formatOnSave": true, // eslint保存格式化 "javascript