angularjs+eslint-plugin-angular

一、安装 eslint-plugin-angular

1、安装eslint

1）全局安装

2）局部安装

3）eslint初始化

2、检查eslint 是否安装森旅成功

1）此时会生成.eslintrc.js文件，且内容如下（根据初始化时的选择会有差异）：

2）运行eslint 命令（--fix 命令可自动修复常见问题）

此时命令行槐饥工具会出现错误提示

3、添加eslint-plugin-angular插件

1）运行如下命令

2）修改.eslintrc.js文铅春返件

3）再次执行eslint命令，可在命令行查看警告

参考网址：

1）http://eslint.cn/

2）https://github.com/Gillespie59/eslint-plugin-angular

3）https://github.com/johnpapa/angular-styleguide/tree/master/a1

如果项目目录下有多个配置文件岁清首，ESLint 只会使用一个，优先级为： .eslintrc.js > .eslintrc > package.json ，一般我们都是在 .eslintrc.js 配置。

同时，如果配置文件里没有 "root": true 这个属性，ESLint就会继续向外寻找配置文件，直到找到有 "root": true 的为止，所有这些配置文件的规则都会被层叠应用。若有重复的属性配置，则离文件更近的配置文件具有更高的优先级。

当想要所有项目都遵循一个特定的约定时会很有用，但还是建议给项目根目录的 .eslintrc.js 加上 root: true

1.1 extends - Extending Configuration Files

一个ESLint配置文件，一旦扩展了(即从外部引入了其他配置包)，就能继承另一个配置文件的所有属性(包括rules, plugins, and language option在内)，然后通过merge合并/覆盖所有原本的配置。

extends 属性的值可以是：

"eslint:recommended" 这个扩展包帮我们启用了一系列核心规则，这些规则正悔是在 rules页面 中被标记为 ✅ 的常见问题。

ESLint插件 是可以给ESLint添加很多扩展规则的npm包，它可以执行很多方法，包括但不限于 添加新规则 和 导出 可共享配置 。

在添加到配置文件 (如 .eslintrc.js ) 的 plugins 的 时候，可以省略插件包名的 eslint-plugin- 前缀

在 extends 中插件字符串值则可以是：

插件包名的格式一般是 eslint-plugin-<plugin-name>，就像 eslint-plugin-prettier ；

也可能是含命名空间包的格式 @<scope>/eslint-plugin-<plugin-name>，例如 @vue/eslint-config-prettier；

甚至 @<scope>/eslint-plugin ，如 @jquery/eslint-plugin 。

通过extends设置的配置包加载的时候，是递归的形式去查找配置文件(最终是一个导出的对象，详细看 ② )，然后一步步派生继承的。

例如： extends: ["foo"] ，然后对应的 eslint-config-foo 有 plugins: ["bar"] , ESLint 会先找到 ./node_modules/ 下的 eslint-plugin-bar , (而不是 ./node_modules/eslint-config-foo/node_modules/)，更不会从祖先目录去查找。配置文件和基本配置中的每个插件都会唯一地解析。

按照上述规则，我们来梳理下 ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"] (vue-cli4 + ESLint + prettier 的 默认extends值)的配置文件分别在哪里。仅帮助乎数加深理解。

我们再去项目根目录的 ./node_modules 找 eslint-plugin-prettier 和 eslint-config-prettier 插件，然后得知，@vue/prettier最终导入了 ./node_modules/eslint-config-prettier/index.js 、 ./node_modules/eslint-config-prettier/vue.js 和 ./node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js 的规则

parserOptions - Specifying Parser Options

指定你想要支持的 JavaScript 语言选项。默认支持 ECMAScript 5 语法。你可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。

3.1 rules - Configuring Rules

ESLint 拥有大量的规则。你可以通过配置插件添加更多规则。使用注释或配置文件修改你项目中要使用的规则。要改变一个规则，你必须将规则 ID 设置为下列值之一：

3.1.1 在文件注释里配置规则 (只在当前文件生效)

上面的例子， eqeqeq 规则被关闭， curly 规则被打开，且定义为错误级别。出于便于理解的考虑，可以用字符串值，如果很熟悉的话用对应的数字来定义也是一样的。

如果一个规则有额外的参数选项，你可以用数组字面量语法来指定它们，比如：

这条注释为规则 quotes 指定了 “double”选项。数组的第一项总是规则的严重程度（数字/字符串）

3.1.2 在配置文件配置规则

要配置定义在插件中的一个规则，你必须使用 插件名/规则ID 的形式。比如：

规则 plugin1/rule1 表示来自插件 plugin1 的 rule1 规则。当指定来自插件的规则时，确保删除 eslint-plugin- 前缀。ESLint 在内部只使用没有前缀的名称去定位规则。

4.1 parser - Specifying Parser

被指定的解析器必须是可以从它的配置文件中加载的Node模块。这意味着应该使用 npm 单独安装这个解析器包；它必须符合 parser interface 。

4.2 plugins - Configuring Plugins

ESLint支持使用第三方插件。要使用插件，必须先用npm进行安装。

要在配置文件中配置插件，可以用 plugins 属性，它的值是包含插件名称的列表(数组)。其中，插件名可以省略 eslint-plugin- 前缀(如果有的话)。

插件是根据配置文件(如 eslintrc.js )解析的。换句话说，ESLint会像通过运行 require('eslint-plugin-pluginname') 一样加载我们配置在 eslintrc.js 中的插件。所以要保证在这个包在当前配置文件的./node_modules/下找得到。

连着 extends 属性讲比较清楚，因此其他已经在上面 1.1.2 - 插件具体是如何实现扩展配置的 讲过了。

避免文章冗长又碍可读性又分篇了，指路：➡️ ESLint配置详解(二) - 常用规则(Rules)集合

1.查看代理：npm get registry

2.设置淘宝镜像

2.1临时使用.

npm --registry https://registry.npm.taobao.org install express

2.2持久使用.

npm config set registry https://registry.npm.taobao.org

2.3验证是否成功

npm config get registry 或 npm info express

2.4.还原：

npm config set registry https://registry.npmjs.org/

1.npm install -g n

2.n stable （最新稳定版本）或者 n latest （最新版本）

1.安装新包：npm install -g @vue/cli

2.查看版本：vue --version 或者 vue -V

3.vue create projectName

4.Check the features needed for your project:

5.Use history mode for router

6.Pick a CSS pre-processor

7.Pick a linter / formatter config

8.Pick additional lint features

9.Pick a unit testing solutio

10.Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

11.Save this as a preset for future projects

1.安装：npm install vue-i18n 或者 vue add i18n (Vue CLI 3)

2.选择默认环境：The locale of project localization. (en) 输入：zh

3.切换的环境The fallback locale of project localization 输入：en

4.打开项目，在src下新启租建lang目录

5.选择在src下的一个目录作为存放：The directory where store localization messages of project. It's stored under

src directory. (locales)

输入：lang

6.单引号设置：Enable locale messages in Single file components ? (y/N) 输入：y

7.查看目录lang，生成型旁茄了zh.json en.json

1.命令安装：npm i --save-dev postcss

2.命令安装：npm isntall postcss-import

3.命令安装：npm i postcss-px-to-viewport

4.命令安装：npm i postcss-aspect-ratio-mini

5.命令安装：卜察npm i postcss-cssnext

6.命令安装：npm i postcss-write-svg

7.命令安装：npm i postcss-viewport-units

8.命令安装：npm i cssnano-preset-advanced --save-dev

9.命令安装：npm install

10.打开项根目录下找到postcss.conf.js

改为：

11.npm run serve

项目打开成功如下图，样式单位由PX换位VM即为成功

使用方式：找到报错文件，右键Fix ESlint Problems即可，

注意：网上有两种方式：一种右键.eslintrc.js文件执行Fix ESlint 或者 Apply ESlint或者eslint --fix后再运行，报错会消失，但是错误并不会改正。

---