jslintconsole

⑴ 自學前端，誰有前端學習路線圖嗎

自學web前端你可以根據自己的實際情況看視頻，現在培訓機構都有web前端的視頻，學習web前端就是「三多」多思考、多敲、多問 不懂的東西一定要問，過來的人肯定有自己的經驗，站在巨人的肩膀上你肯定比一般人看得更遠更多。還有就是多敲，鍵盤敲爛，薪資過萬。推薦給你一個學習的路線圖：

階段1.前端核心基礎

HTML +_CSS核心、javaScript基礎語法、JavaScript面向對象、JavaScript DOM和

BOM編程、jQuery框架

階段2.HTML5 + CSS3 + 移動端核心

HTML5新特性、Canvas專列、CSS3新特性、CSS3進階、CSS3實例演練

階段3.移動端

移動端核心、移動端適配、移動端特效

階段4.伺服器端

伺服器端開發、資料庫操作、前後端交互核心、微信公眾號開發

階段5.JavaScript高級

JavaScript基礎深入剖析、JavaScript面向對象深入講解、JavaScript非同步編程、

JavaScript函數式編程JavaScript設計模式

階段6.前端必備

性能優化、版本控制工具、模塊化、項目構建工具

階段7.高級框架

React框架基本使用、React框架進階、Vue框架基本使用、Vue框架進階、Vue源碼分析

階段8.小程序

原生小程序入門、原生小程序API使用、小程序框架Mpvue

前端學習路線圖

這個學習路線圖你按照順序學習就可以了，希望對你有幫助。

⑵ phpstrom怎麼關閉eslint

使用ESlint
一、ESLint跟jsLint和JSHint類似，但有以下區別：
1.使用Espree進行js解析(parse)
2.用AST抽象語法樹去識別(evaluate)代碼中的模式3.每個規則都是獨立的插件
二、安裝
全局安裝：
npm install -g eslint
三、使用
如果是第一次使用，eslint --init 命令幫你完成初始化，生成.eslintrc文件然後eslint test.js test2.js
四、配置
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
提示有三個level：
"off" or 0 - 關閉這個規則校驗
"warn" or 1 - 開啟這個規則校驗，但只是提醒，不會退出"error" or 2 - 開啟這個規則校驗，並退出
五、常見問題
1.為什麼不用jslint
創建eslint是因為急需插件化的校驗工具
2.ESLint跟JSHint、JSCS的比較
ESLint比JSlint要慢2~3倍，因為ESLint在識別代碼前需要用Espress構建AST,而JSHint在解析的時候就會識別代碼。雖然慢些，但不至於成為痛點。
ESLint比JSCS快，（as ESLint uses a single-pass traversal for analysis whereas JSCS using a querying model.）3.ESLint僅僅是校驗還是也檢查代碼風格
都有。ESLint does both traditional linting (looking for problematic patterns) and style checking (enforcement of conventions). You can use it for both.
4.支持es6嗎？
支持。參考配置eslint.org/docs/user-guide/configuring5.支持JSX？
支持，但並不表示支持React。（Yes, ESLint natively supports parsing JSX syntax (this must be enabled in configuration.). Please note that supporting JSX syntax is not the same as supporting React. React applies specific semantics to JSX syntax that ESLint doesn't recognize. We recommend using eslint-plugin-react if you are using React and want React semantics.）5.支持es7嗎？
本身不支持，可以使用babel-eslint
六、下面詳細介紹下配置，地址eslint.org/docs/user-guide/configuring1.配置ESLint
主要有兩種方法配置
（1）配置注釋，直接嵌入到js文件中
（2）配置文件，使用js、json或者yaml文件來為整個目錄及其子目錄配置。形式有：.eslintrc.*文件，或者在package.json中配置eslintConfig欄位，或者在命令行里配置。
配置分幾個方面：
（1）環境（env）：設置你的腳本的目標運行環境，如browser，amd，es6，commonjs等，每種環境有預設的全局變數（2）全局變數：增加的全局變數供運行時使用（3）規則（rules）：設定的規則及該規則對應的報錯level2.配置解析器選項（Specifying Parser Options）默認僅支持ES5語法，可以設置為es6 es7 jsx等。
復制代碼
{
"parserOptions": {
"ecmaVersion": 6, // 可選 3 5（默認） 6 7"sourceType": "mole", // 可選script（默認） mole"ecmaFeatures": {
"jsx": true
},
},
"rules": {
"semi": 2
}
}
復制代碼
3.配置解析器（Specifying Parser），需要本地npm模塊{
"parser": "esprima", // Espree(默認) Esprima Babel-ESLint"rules": { "semi": "error" } }
4.配置環境（Specifying Environments），可以多選復制代碼
browser - browser global variables.
node - Node.js global variables and Node.js scoping.
commonjs - CommonJS global variables and CommonJS scoping (use this for browser-only code that uses Browserify/WebPack).
shared-node-browser - Globals common to both Node and Browser.
es6 - enable all ECMAScript 6 features except for moles.
worker - web workers global variables.
amd - defines require() and define() as global variables as per the amd spec.
mocha - adds all of the Mocha testing global variables.
jasmine - adds all of the Jasmine testing global variables for version 1.3 and 2.0.
jest - Jest global variables.
phantomjs - PhantomJS global variables.
protractor - Protractor global variables.
qunit - QUnit global variables.
jquery - jQuery global variables.
prototypejs - Prototype.js global variables.
shelljs - ShellJS global variables.
meteor - Meteor global variables.
mongo - MongoDB global variables.
applescript - AppleScript global variables.
nashorn - Java 8 Nashorn global variables.
serviceworker - Service Worker global variables.
atomtest - Atom test helper globals.
embertest - Ember test helper globals.
webextensions - WebExtensions globals.
greasemonkey - GreaseMonkey globals.
復制代碼
如果要在待校驗文件裡面配置可以這樣配置：
/*eslint-env node, mocha */
如果要在配置文件中配置：
{
"env": {
"browser": true,
"node": true
}
}
如果在package.json中配置：
復制代碼
{
"name": "mypackage",
"version": "0.0.1",
"eslintConfig": {
"env": {
"browser": true,
"node": true
}
}
}
復制代碼
如果在YAML中配置：
---
env:
browser: true
node: true
也可以用插件
{
"plugins": ["example"],
"env": {
"example/custom": true
}
}
5.配置全局變數（Specifying Globals）
定義了全局變數以後，使用他們，ESLint不會發出警告。
在js文件中定義：
/*global var1, var2*/
設置read only
/*global var1:false, var2:false*/
在配置文件中：
{
"globals": {
"var1": true,
"var2": false
}
}
6.配置插件（Configuring Plugins）
使用npm安裝第三方插件
{
"plugins": [
"plugin1",
"eslint-plugin-plugin2"
]
}
7.配置規則（Configuring Rules）
js中配置：
/*eslint eqeqeq: "off", curly: "error"*/
或者：
/*eslint eqeqeq: 0, curly: 2*/
如果規則有多個選項：
/*eslint quotes: ["error", "double"], curly: 2*/在配置文件中設置：
復制代碼
{
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"]
}
}
復制代碼
使用插件：
復制代碼
{
"plugins": [
"plugin1"
],
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"],
"plugin1/rule1": "error"
}
}
復制代碼
/*eslint "plugin1/rule1": "error" */
臨時關閉eslint校驗：
/*eslint-disable */
//Disable all rules between comments
alert('foo');
/*eslint-enable */
/*eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/*eslint-enable no-alert */
在js特定行關閉校驗：
alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');
alert('foo'); // eslint-disable-line no-alert, quotes, semi// eslint-disable-next-line no-alert, quotes, semialert('foo');
8.增加共享設置（Adding Shared Settings）
{
"settings": {
"sharedData": "Hello"
}
}
9.使用配置文件
eslint -c myconfig.json myfiletotest.js
10.繼承配置文件（Extending Configuration Files）復制代碼
{
"extends": [
"./node_moles/coding-standard/eslintDefaults.js",// Override eslintDefaults.js
"./node_moles/coding-standard/.eslintrc-es6",// Override .eslintrc-es6
"./node_moles/coding-standard/.eslintrc-jsx",],
"rules": {
// Override any settings from the "parent" configuration"eqeqeq": "warn"
}
}
復制代碼
11.忽略文件或目錄(Ignoring Files and Directories)建立.eslintignore文件
復制代碼
# /node_moles and /bower_components ignored by default# Ignore files compiled from TypeScript and CoffeeScript**/*.{ts,coffee}.js
# Ignore built files except build/index.jsbuild/
!build/index.js

⑶ 請教如何在phpStorm中配置eslint

• 使用ESlint

一、ESLint跟JSLint和JSHint類似，但有以下區別：

1.使用Espree進行js解析(parse)

2.用AST抽象語法樹去識別(evaluate)代碼中的模式3.每個規則都是獨立的插件

二、安裝

全局安裝：

npm install -g eslint

三、使用

如果是第一次使用，eslint --init 命令幫你完成初始化，生成.eslintrc文件然後eslint test.js test2.js

四、配置

{

"rules": {

"semi": ["error", "always"],

"quotes": ["error", "double"]

}

}

提示有三個level：

"off" or 0 - 關閉這個規則校驗

"warn" or 1 - 開啟這個規則校驗，但只是提醒，不會退出"error" or 2 - 開啟這個規則校驗，並退出

五、常見問題

1.為什麼不用jslint

創建eslint是因為急需插件化的校驗工具

2.ESLint跟JSHint、JSCS的比較

ESLint比JSlint要慢2~3倍，因為ESLint在識別代碼前需要用Espress構建AST,而JSHint在解析的時候就會識別代碼。雖然慢些，但不至於成為痛點。

ESLint比JSCS快，（as ESLint uses a single-pass traversal for analysis whereas JSCS using a querying model.）3.ESLint僅僅是校驗還是也檢查代碼風格

都有。ESLint does both traditional linting (looking for problematic patterns) and style checking (enforcement of conventions). You can use it for both.

4.支持es6嗎？

支持。參考配置eslint.org/docs/user-guide/configuring5.支持JSX？

支持，但並不表示支持React。（Yes, ESLint natively supports parsing JSX syntax (this must be enabled in configuration.). Please note that supporting JSX syntax is not the same as supporting React. React applies specific semantics to JSX syntax that ESLint doesn't recognize. We recommend using eslint-plugin-react if you are using React and want React semantics.）5.支持es7嗎？

本身不支持，可以使用babel-eslint

六、下面詳細介紹下配置，地址eslint.org/docs/user-guide/configuring1.配置ESLint

主要有兩種方法配置

（1）配置注釋，直接嵌入到js文件中

（2）配置文件，使用js、json或者yaml文件來為整個目錄及其子目錄配置。形式有：.eslintrc.*文件，或者在package.json中配置eslintConfig欄位，或者在命令行里配置。

配置分幾個方面：

（1）環境（env）：設置你的腳本的目標運行環境，如browser，amd，es6，commonjs等，每種環境有預設的全局變數（2）全局變數：增加的全局變數供運行時使用（3）規則（rules）：設定的規則及該規則對應的報錯level2.配置解析器選項（Specifying Parser Options）默認僅支持ES5語法，可以設置為es6 es7 jsx等。

復制代碼

{

"parserOptions": {

"ecmaVersion": 6, // 可選 3 5（默認） 6 7"sourceType": "mole", // 可選script（默認） mole"ecmaFeatures": {

"jsx": true

},

},

"rules": {

"semi": 2

}

}

復制代碼

3.配置解析器（Specifying Parser），需要本地npm模塊{

"parser": "esprima", // Espree(默認) Esprima Babel-ESLint"rules": { "semi": "error" } }

4.配置環境（Specifying Environments），可以多選復制代碼

browser - browser global variables.

node - Node.js global variables and Node.js scoping.

commonjs - CommonJS global variables and CommonJS scoping (use this for browser-only code that uses Browserify/WebPack).

shared-node-browser - Globals common to both Node and Browser.

es6 - enable all ECMAScript 6 features except for moles.

worker - web workers global variables.

amd - defines require() and define() as global variables as per the amd spec.

mocha - adds all of the Mocha testing global variables.

jasmine - adds all of the Jasmine testing global variables for version 1.3 and 2.0.

jest - Jest global variables.

phantomjs - PhantomJS global variables.

protractor - Protractor global variables.

qunit - QUnit global variables.

jquery - jQuery global variables.

prototypejs - Prototype.js global variables.

shelljs - ShellJS global variables.

meteor - Meteor global variables.

mongo - MongoDB global variables.

applescript - AppleScript global variables.

nashorn - Java 8 Nashorn global variables.

serviceworker - Service Worker global variables.

atomtest - Atom test helper globals.

embertest - Ember test helper globals.

webextensions - WebExtensions globals.

greasemonkey - GreaseMonkey globals.

復制代碼

如果要在待校驗文件裡面配置可以這樣配置：

/*eslint-env node, mocha */

如果要在配置文件中配置：

{

"env": {

"browser": true,

"node": true

}

}

如果在package.json中配置：

復制代碼

{

"name": "mypackage",

"version": "0.0.1",

"eslintConfig": {

"env": {

"browser": true,

"node": true

}

}

}

復制代碼

如果在YAML中配置：

---

env:

browser: true

node: true

也可以用插件

{

"plugins": ["example"],

"env": {

"example/custom": true

}

}

5.配置全局變數（Specifying Globals）

定義了全局變數以後，使用他們，ESLint不會發出警告。

在js文件中定義：

/*global var1, var2*/

設置read only

/*global var1:false, var2:false*/

在配置文件中：

{

"globals": {

"var1": true,

"var2": false

}

}

6.配置插件（Configuring Plugins）

使用npm安裝第三方插件

{

"plugins": [

"plugin1",

"eslint-plugin-plugin2"

]

}

7.配置規則（Configuring Rules）

js中配置：

/*eslint eqeqeq: "off", curly: "error"*/

或者：

/*eslint eqeqeq: 0, curly: 2*/

如果規則有多個選項：

/*eslint quotes: ["error", "double"], curly: 2*/在配置文件中設置：

復制代碼

{

"rules": {

"eqeqeq": "off",

"curly": "error",

"quotes": ["error", "double"]

}

}

復制代碼

使用插件：

復制代碼

{

"plugins": [

"plugin1"

],

"rules": {

"eqeqeq": "off",

"curly": "error",

"quotes": ["error", "double"],

"plugin1/rule1": "error"

}

}

復制代碼

/*eslint "plugin1/rule1": "error" */

臨時關閉eslint校驗：

/*eslint-disable */

//Disable all rules between comments

alert('foo');

/*eslint-enable */

/*eslint-disable no-alert, no-console */

alert('foo');

console.log('bar');

/*eslint-enable no-alert */

在js特定行關閉校驗：

alert('foo'); // eslint-disable-line

// eslint-disable-next-line

alert('foo');

alert('foo'); // eslint-disable-line no-alert, quotes, semi// eslint-disable-next-line no-alert, quotes, semialert('foo');

8.增加共享設置（Adding Shared Settings）

{

"settings": {

"sharedData": "Hello"

}

}

9.使用配置文件

eslint -c myconfig.json myfiletotest.js

10.繼承配置文件（Extending Configuration Files）復制代碼

{

"extends": [

"./node_moles/coding-standard/eslintDefaults.js",// Override eslintDefaults.js

"./node_moles/coding-standard/.eslintrc-es6",// Override .eslintrc-es6

"./node_moles/coding-standard/.eslintrc-jsx",],

"rules": {

// Override any settings from the "parent" configuration"eqeqeq": "warn"

}

}

復制代碼

11.忽略文件或目錄(Ignoring Files and Directories)建立.eslintignore文件

復制代碼

# /node_moles and /bower_components ignored by default# Ignore files compiled from TypeScript and CoffeeScript**/*.{ts,coffee}.js

# Ignore built files except build/index.jsbuild/

!build/index.js

⑷ 一名合格的前端工程師的知識結構是怎樣的

入門
在我理解下的基礎知識，就是我們可以寫一些基本的樣式，並能對頁面的元素進行操作。舉例來說，就是我們用Spring和JSP寫了一個博客，然後我們可以用jQuery來對頁面進行一些簡單的操作，並可以調用一些API。因此，我們需要基本的HTML / CSS知識。只是要寫好CSS並不是一件簡單的事，這需要很多實戰經驗。隨後，我們還需要有JavaScript的經驗，要不怎麼做前端呢？ 同時，我們還需要對DOM有一些基礎的了解，才能做一些基本的操作，如修改顏色等等。在這種情況下，最簡單的方案就是使用jQuery這樣的工具。不過，如果可以自己操作DOM是再好不過的了。
中級篇
中級篇就更有意思了，現在我們就需要對頁面進行更復雜的操作。Ajax和JSON這兩個技能是必須的，當我們要動態的改變頁面的元素時，我們就需要從遠程獲取最新的數據結果。並且我們也需要提交表單到伺服器，RESTful就是必須要學會的技能。未來我們還需要Fetch API，ReactiveX這些技能。 除此我們還需要掌握好HTML的語義化，像DIV / CSS這也會必須會的技能，我們應該還會使用模板引擎和SCSS / SASS。而這個層面來說，我們開始使用Node.js來完成前端的構建等等的一系列動作，這時候必須學會使用命令行這類工具。並且，在這時候我們已經開始構建單頁面應用了。
高級篇
JavaScript是一門易上手的語言，也充滿了相當多的糟粕的用法。幾年前人們使用CoffeeScript編成成JavaScript來編寫更好的前端代碼，現在人們有了ES6、TypeScript和WebPack來做這些事。盡管現在瀏覽器支持不完善，但是他們是未來。同樣的還有某些CSS3的特性，其對於某些瀏覽器來說也是不支持的。而這些都是基於語言本來說的，要寫好代碼，我們還需要掌握面向對象編程、函數式編程、MVC / MVVM / MV*這些概念。作為一合格的工程師，我們還需要把握好安全性（如跨域），做好 授權（如HTTP Basic、JWT等等）。
工程化
這個標題好像是放錯了，這部分的內容主要都是自動構建的內容。首先，我們需要有基本的構建工具，無論你是使用gulp、grunt，還是只使用npm，這都不重要。重要的是，你可以自動化的完成構建的工具，編譯、靜態代碼分析（JSLint、CSS Lint、TSLint）、對代碼質量進行分析（如Code Climate，可以幫你檢測出代碼中的Bad Smell）、運行代碼中的測試，並生成測試覆蓋率的報告等等。這一切都需要你有一個自動構建的工作流。
兼容性
雖然我們離兼容IE6的時代已越來越遠了，但是我們仍然有相當多的兼容性工作要做。基本的兼容性測試就是跨瀏覽器的測試，即Chrome，IE，Firefox，Safari等等。除此還有在不同的操作系統上對同一瀏覽器的測試，某些情況下可能表現不一致。如不同操作系統的字體大小，可能會導致一些細微的問題。 而隨著移動設備的流行，我們還需要考慮下不同Android版本下的瀏覽器內核的表現不致，有時候還要一下不成器的Windows Phone。除此，還有同一個瀏覽器的不同版本問題，常見於IE。。
前端特定
除了正常的編碼之外，前端還有一些比較有意思的東西，如CSS3和JavaScript動畫。使用Web字體，可惜這個不太適合漢字使用。還有Icon字體，畢竟這種字體是矢量的。不過Icon字體還有一些問題，如瀏覽器對其的抗鋸齒優化，還有一個痛是你得准備四種不同類型的字體文件。因此，產生了一種東西SVG Sprite，在以前這就是CSS Sprite，只是CSS Sprite不能縮放。最後，我們還需要掌握一些基本的圖形和圖表框架的使用。
軟體工程
這一點上和大部分語言的項目一樣，我們需要使用版本管理軟體，如git、svn，又或者是一些內部的工具。總之你肯定要有一個，而不是 2016.07.31.zip這種文件。然後，你還需要一些依賴管理工具，對於那些使用Webpack、Browserify來將代碼編寫成前端代碼的項目來說，npm還是挺好用的。不過就個人來說，對於傳統的項目來說我總覺得bower有些難用。我們還需要模塊化我們的源碼文件，才能使其他人更容易開始項目。
調試
作為一個工程師來說，調試是必備的技能。大部分瀏覽器都自帶有調試工具，他們都不錯——如果你使用過的話。在調試的過程中，直接用Console就可以輸出值、計算值等等。如果你的項目在構建的過程中有一些問題，你就需要debugger這一行代碼了。 在一些調用遠程API的項目里，我們還需要一些更復雜的工具，即抓包工具。在調試移動設備時，像Wireshark、Charles這一類的工具，就可以讓我們看到是否有一些異常的請求。當然在這個時候，還有一個不錯的工具就是像Chrome自帶的遠程設備調試。對於移動網站來說，還要有Responsive視圖。
測試
我遇到的很多前端工程師都是不寫測試的，於是我便把它單獨地抽了出現。對於一個前端項目來說，正常情況下，我們要有單元測試、功能測試，還有要一些UI測試來驗證頁面間是否可以跳轉。對於依賴於第三方服務的應用來說，還要有一個Mock的服務來方便我們測試。如果是前後端分離的項目，我們還需要有集成測試。
性能與優化
要對Web應用進行性能優化，可能不是一件容易的事，有時候我們還知道哪些地方可以優化。這時候人們就可以使用Yahoo的YSlow，或者我最喜歡的Google PageSpeed來檢測頁面的一些問題，如有沒有開啟GZip、有沒有壓縮、合並、Minify JS代碼等等。 我們還應該藉助於NetWork這一類的工具，查看頁面載入時，一些比較漫的資源文件，並對其進行優化。在一些情況下，我們還需要藉助如Chrome的Timline、Profiel等工具來查看可以優化的地方。
設計
前端工程師還需要具備基本的UI技能。多數情況下拿到的只是一張圖，如果是一個完整的頁面，我們就需要快速分割頁面布局。而依賴於不同的頁面布局，如響應式、網格、FlexBox布局也會有不同的設計。而有些時候，我們就需要自己規劃，製作一個基本的線框圖（Wireframe）等等。
SEO
如果以搜索引擎作為流量來源，我們還需要考慮頁面的內容，除非你用的是競爭排名。像Sitemap可能就不是我們考慮的內容，而我們還要考慮很多點。首先，我們需要保證頁面的內容是對於搜索引擎是可見的，並且對應的頁面還要有基本的Title、Description和Keyword。然後在一些關鍵的字體，如欄目標題等等可以用H2之類的大字的地方就不要放過。同時在頁面設計的過程中，我們還需要考慮一些內部鏈接的建設。
它即可以提供頁面的可見度，又可以提高排名。最後，如果你是面向的是Google等支持結構化數據的搜索引擎，你還需要考慮一下MicroData / MicroFormat這一類東西。

⑸ 請教如何在phpStorm中配置eslint

使用ESlint
一、ESLint跟JSLint和JSHint類似，但有以下區別：
1.使用Espree進行js解析(parse)
2.用AST抽象語法樹去識別(evaluate)代碼中的模式3.每個規則都是獨立的插件
二、安裝
全局安裝：
npm install -g eslint
三、使用
如果是第一次使用，eslint --init 命令幫你完成初始化，生成.eslintrc文件然後eslint test.js test2.js
四、配置
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
提示有三個level：
"off" or 0 - 關閉這個規則校驗
"warn" or 1 - 開啟這個規則校驗，但只是提醒，不會退出"error" or 2 - 開啟這個規則校驗，並退出
五、常見問題
1.為什麼不用jslint
創建eslint是因為急需插件化的校驗工具
2.ESLint跟JSHint、JSCS的比較
ESLint比JSlint要慢2~3倍，因為ESLint在識別代碼前需要用Espress構建AST,而JSHint在解析的時候就會識別代碼。雖然慢些，但不至於成為痛點。
ESLint比JSCS快，（as ESLint uses a single-pass traversal for analysis whereas JSCS using a querying model.）3.ESLint僅僅是校驗還是也檢查代碼風格
都有。ESLint does both traditional linting (looking for problematic patterns) and style checking (enforcement of conventions). You can use it for both.
4.支持es6嗎？
支持。參考配置eslint.org/docs/user-guide/configuring5.支持JSX？
支持，但並不表示支持React。（Yes, ESLint natively supports parsing JSX syntax (this must be enabled in configuration.). Please note that supporting JSX syntax is not the same as supporting React. React applies specific semantics to JSX syntax that ESLint doesn't recognize. We recommend using eslint-plugin-react if you are using React and want React semantics.）5.支持es7嗎？
本身不支持，可以使用babel-eslint
六、下面詳細介紹下配置，地址eslint.org/docs/user-guide/configuring1.配置ESLint
主要有兩種方法配置
（1）配置注釋，直接嵌入到js文件中
（2）配置文件，使用js、json或者yaml文件來為整個目錄及其子目錄配置。形式有：.eslintrc.*文件，或者在package.json中配置eslintConfig欄位，或者在命令行里配置。
配置分幾個方面：
（1）環境（env）：設置你的腳本的目標運行環境，如browser，amd，es6，commonjs等，每種環境有預設的全局變數（2）全局變數：增加的全局變數供運行時使用（3）規則（rules）：設定的規則及該規則對應的報錯level2.配置解析器選項（Specifying Parser Options）默認僅支持ES5語法，可以設置為es6 es7 jsx等。
復制代碼
{
"parserOptions": {
"ecmaVersion": 6, // 可選 3 5（默認） 6 7"sourceType": "mole", // 可選script（默認） mole"ecmaFeatures": {
"jsx": true
},
},
"rules": {
"semi": 2
}
}
復制代碼
3.配置解析器（Specifying Parser），需要本地npm模塊{
"parser": "esprima", // Espree(默認) Esprima Babel-ESLint"rules": { "semi": "error" } }
4.配置環境（Specifying Environments），可以多選復制代碼
browser - browser global variables.
node - Node.js global variables and Node.js scoping.
commonjs - CommonJS global variables and CommonJS scoping (use this for browser-only code that uses Browserify/WebPack).
shared-node-browser - Globals common to both Node and Browser.
es6 - enable all ECMAScript 6 features except for moles.
worker - web workers global variables.
amd - defines require() and define() as global variables as per the amd spec.
mocha - adds all of the Mocha testing global variables.
jasmine - adds all of the Jasmine testing global variables for version 1.3 and 2.0.
jest - Jest global variables.
phantomjs - PhantomJS global variables.
protractor - Protractor global variables.
qunit - QUnit global variables.
jquery - jQuery global variables.
prototypejs - Prototype.js global variables.
shelljs - ShellJS global variables.
meteor - Meteor global variables.
mongo - MongoDB global variables.
applescript - AppleScript global variables.
nashorn - Java 8 Nashorn global variables.
serviceworker - Service Worker global variables.
atomtest - Atom test helper globals.
embertest - Ember test helper globals.
webextensions - WebExtensions globals.
greasemonkey - GreaseMonkey globals.
復制代碼
如果要在待校驗文件裡面配置可以這樣配置：
/*eslint-env node, mocha */
如果要在配置文件中配置：
{
"env": {
"browser": true,
"node": true
}
}
如果在package.json中配置：
復制代碼
{
"name": "mypackage",
"version": "0.0.1",
"eslintConfig": {
"env": {
"browser": true,
"node": true
}
}
}
復制代碼
如果在YAML中配置：
---
env:
browser: true
node: true
也可以用插件
{
"plugins": ["example"],
"env": {
"example/custom": true
}
}
5.配置全局變數（Specifying Globals）
定義了全局變數以後，使用他們，ESLint不會發出警告。
在js文件中定義：
/*global var1, var2*/
設置read only
/*global var1:false, var2:false*/
在配置文件中：
{
"globals": {
"var1": true,
"var2": false
}
}
6.配置插件（Configuring Plugins）
使用npm安裝第三方插件
{
"plugins": [
"plugin1",
"eslint-plugin-plugin2"
]
}
7.配置規則（Configuring Rules）
js中配置：
/*eslint eqeqeq: "off", curly: "error"*/
或者：
/*eslint eqeqeq: 0, curly: 2*/
如果規則有多個選項：
/*eslint quotes: ["error", "double"], curly: 2*/在配置文件中設置：
復制代碼
{
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"]
}
}
復制代碼
使用插件：
復制代碼
{
"plugins": [
"plugin1"
],
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"],
"plugin1/rule1": "error"
}
}
復制代碼
/*eslint "plugin1/rule1": "error" */
臨時關閉eslint校驗：
/*eslint-disable */
//Disable all rules between comments
alert('foo');
/*eslint-enable */
/*eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/*eslint-enable no-alert */
在js特定行關閉校驗：
alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');
alert('foo'); // eslint-disable-line no-alert, quotes, semi// eslint-disable-next-line no-alert, quotes, semialert('foo');
8.增加共享設置（Adding Shared Settings）
{
"settings": {
"sharedData": "Hello"
}
}
9.使用配置文件
eslint -c myconfig.json myfiletotest.js
10.繼承配置文件（Extending Configuration Files）復制代碼
{
"extends": [
"./node_moles/coding-standard/eslintDefaults.js",// Override eslintDefaults.js
"./node_moles/coding-standard/.eslintrc-es6",// Override .eslintrc-es6
"./node_moles/coding-standard/.eslintrc-jsx",],
"rules": {
// Override any settings from the "parent" configuration"eqeqeq": "warn"
}
}
復制代碼
11.忽略文件或目錄(Ignoring Files and Directories)建立.eslintignore文件
復制代碼
# /node_moles and /bower_components ignored by default# Ignore files compiled from TypeScript and CoffeeScript**/*.{ts,coffee}.js
# Ignore built files except build/index.jsbuild/
!build/index.js

⑹ HTML是什麼

HTML是超文本標記語言(HyperTextMarkupLanguage)，標准通用標記語言下的一個應用，HTML 不是一種編程語言，而是一種標記語言 (markup language)，是網頁製作所必備的。

頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素，結構包括「頭」部分（英語：Head）、和「主體」部分（英語：Body），其中「頭」部提供關於網頁的信息，「主體」部分提供網頁的具體內容。

(6)jslintconsole擴展閱讀：

1、特性

簡易性：超級文本標記語言版本升級採用超集方式，從而更加靈活方便。

可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言採取子類元素的方式，為系統擴展帶來保證。

2、組成

字元和漢字是最基本的組成形式，同時還有許多特殊字元，它們一起構成了HTML字元集。HTML字元可以用一些代碼來表示，代碼可以有2種表示方式。即字元代碼（命名實體）和數字代碼（編號實體）。

3、語法格式

16進制顏色代碼之前必須有一個「#」號，這種顏色代碼是由三部分組成的，其中前兩位代表紅色，中間兩位代表綠色，後兩位代表藍色。不同的取值代表不同的顏色，他們的取值范圍是00--FF。

10進制RGB碼在這種表示法中，後面三個參數分別是紅色、綠色、藍色，他們的取值范圍是0--255。以上兩種表達方式可以相互轉換，標準是16進制與10進制的相互轉換。

⑺ 什麼是立即執行函數

即執行函數(Immediate Functions)
立即執行函數模式是一種語法，可以讓你的函數在定義後立即被執行，比如：
[javascript] view plain
(function () {
alert('watch out!');
}());
這種模式本質上就是函數表達式(命名的或者匿名的)，在創建後立即執行；
立即執行函數(immediate function)術語不是在ECMAScript標准中定義的，但它很短有助於描述和討論模式；

這種模式有一些幾部分組成：
使用函數表達式定義一個函數(函數聲明不能起作用)
在結尾加上一對括弧，讓函數立即被執行
將整個函數包裹在一對括弧中(只有在你不將函數賦值給一個變數的時候才需要)
下面這種可選的語法形式也是很常見的(注意結尾的一對括弧)，但JSLint趨向於第一種：
[javascript] view plain
(function () {
alert('watch out!');
})();
這種模式是非常有用的，因為它為你初始化代碼提供了一個作用域的沙箱；
考慮一下下面這種常見的場景：
你的代碼在頁面代碼載入完成之後，不得不執行一些設置工作，比如附加時間處理器，創建對象等等，
所有的這些工作只需要執行一次，所以沒有理由創建一個可復用的命名的函數，
但這些代碼也需要一些臨時的變數，但初始化過程結束後，就再也不會被用到了，
所以將這些變數作為全局變數不是個好主意，所以我們需要立即執行函數——去將我們所有的代碼包裹在它的局部作用域中，不會讓任何變數泄露成全局變數；
[javascript] view plain
(function() {
var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
today = new Date(),
msg = 'Today is ' + days[today.getDay()] + ', ' + today.getDate();
alert(msg);
} ()); // "Today is Fri, 13"
如果代碼沒有被包裹在立即執行函數中，那麼局部變數days，today和msg都將成為全局變數，初始化代碼的遺留產物。

立即執行函數的參數(Parameters of an Immediate Function)
你也可以給立即執行函數傳遞參數，就像下面的例子一樣：
[javascript] view plain
// prints:
// I met Joe Black on Fri Aug 13 2010 23:26:59 GMT-0800 (PST)
(function(who, when) {
console.log("I met " + who + " on " + when);
} ("Joe Black", new Date()));
通常，全局變數被作為一個參數傳遞給立即執行參數，這樣它在函數內部不使用window也可以被訪問到：這種方式可以讓代碼在環境(除了瀏覽器)中更加通用：
[javascript] view plain
(function (global) {
// access the global object via `global`
}(this));
記住：通常你不應該給立即執行函數傳遞太多的函數，因為它很快會成為一個負擔——為了理解代碼是如何工作的，你不得不經常上下滾動源代碼。

立即執行函數的返回值(Returned Values from Immediate Functions)
就像其它任何函數一樣，一個立即執行函數也能返回值並且可以復制給其它變數：
[javascript] view plain
var result = (function () {
return 2 + 2;
}());
另外一種實現相同的功能的方法是省略包裹函數的括弧，因為當你將立即執行函數的返回值賦值給一個變數時它們不是必需的；
[javascript] view plain
var result = function () {
return 2 + 2;
}();
這種語法是非常簡單的，但它可能看起來有點令人誤導；
如果沒有注意到函數結束的括弧，一些人可能就會認為result指向一個函數；
實際上result指向立即執行函數的返回值，在這種情況下是數字 4 。

還有另一種語法可以實現相同的功能：
[javascript] view plain
var result = (function () {
return 2 + 2;
})();
在前面的例子中返回一個基本類型的整數作為立即執行函數的返回值；
但是除了基本類型值，立即執行函數也能返回任何類型的值，包括其它的函數；
那麼，你可以利用立即執行函數的作用域為返回的內部函數私下裡存儲一些數據。

在接下來的例子中，立即執行函數的返回值是一個函數——被賦值給了變數getResult，這個函數簡單的返回了res的值，這個值事先被計算並被儲存在立即執行函數的閉包中：

[javascript] view plain
var getResult = (function() {
var res = 2 + 2;
return function() {
return res;
};
} ());
立即執行函數也可以用來定義對象的屬性；
假如，你需要定義一個很可能在對象生命周期中都不會改變的屬性，但在你定義之前，你需要做一下工作去計算出正確的值；
你可以使用立即執行函數去封裝這些工作，並且立即執行函數的返回值將會成為屬性的值，下面的代碼：

[javascript] view plain
var o = {
message: (function() {
var who = "me",
what = "call";
return what + " " + who;
} ()),
getMsg: function() {
return this.message;
}
};
// usage
o.getMsg(); // "call me"
o.message; // "call me"
在這個例子中，o.message是一個字元串類型的屬性，不是一個函數，但它需要一個函數在腳本被載入時被執行並幫忙定義屬性。

好處和用法(Benefits and Usage)
立即執行函數模式被廣泛使用，它可以幫你封裝大量的工作而不會在背後遺留任何全局變數。
你定義的所有變數都會成員立即執行函數的局部變數，所以你不用擔心這些臨時變數會污染全局空間。

這種模式經常被使用在書簽工具(bookmarklets)中，因為書簽工具在任何頁面上運行並且保持全局命名空間干凈是非常必要的；

這種模式也可以讓你將獨立的功能封裝在自包含模塊中(self-contained moles)。
假如你的頁面是穩定的並且在沒有JavaScript情況下能正常工作，然後本著逐步加強的想法，你加入了一些代碼加強頁面某個方面；
你可以將這些代碼封裝進一個立即執行函數中，並且確保頁面沒有它的情況下也能正常工作。
然後你可以添加更多的加強模塊，移除它們，單獨測試它們，允許用戶去禁用它們等等。

你可以使用下面的模板去定義一個函數模塊，讓我們叫它mole1：
[javascript] view plain
// mole1 defined in mole1.js
(function () {
// all the mole 1 code ...
}());